Hi Nicole

Could you try replacing the contents of your main.php with the following (Joomla 3.x only)...

<!--Setting up Layout for MainContent and Side Columns. Check to see if modules are enabled or disabled in the sidecolumns-->

<?php

if($this->countModules('sidecol-a') == 0 || $this->countModules('sidecol-b') == 0) $contentwidth = '_full';

if($this->countModules('sidecol-a') >= 1 || $this->countModules('sidecol-b') >= 1) $contentwidth = '_remainder';

?>





<!-- Media Queries for Modules Stacking -->

<!-- Stack side columns under main content on mobile devices -->

<style type="text/css">



/* # - Small devices*/

@media only screen and (max-width: 767px) {



    /*hide normal side column layout*/

    .modules-stacked-normal{display: none !important;}

}



/* # - Medium and large devices*/

@media only screen and (min-width: 768px) {



    /*stack side columns under content on Small devices*/

    .modules-stacked-under{display: none !important;}

}

</style>





<div id ="main" class="block_holder">



    <!--Sidecol & content background -->  

    <div class="backgrounds">

       <?php if ($this->countModules( 'sidecol-a' )) : ?>

            <div id="sidecol_a">

            </div>

        <?php endif; ?> 



        <?php if ($this->countModules( 'sidecol-b' )) : ?>    

            <div id="sidecol_b">

            </div>

        <?php endif; ?>



        <div id="content<?php echo $contentwidth; ?>"></div>

    </div>

<!--End Sidecol & content background -->  





<div class="modules-stacked-normal"><!-- Default Stacking of side columns -->

    <!--Side Columns Layout-->                          

    <?php if ($this->countModules( 'sidecol-a' )) : ?>

        <div id="sidecol_a" class="side_margins">

            <div class="sidecol_block">

                <jdoc:include type="modules" name="sidecol-a" style="mod_standard" />

            </div>

        </div>

    <?php endif; ?>

           

        

    <?php if ($this->countModules( 'sidecol-b' )) : ?>    

        <div id="sidecol_b" class="side_margins">

            <div class="sidecol_block">

                <jdoc:include type="modules" name="sidecol-b" style="mod_standard" />

            </div>

        </div>

    <?php endif; ?>

    <!--End Side Columns Layout-->

</div><!-- End Default Stacking of side columns -->



<!--Find Content width and show component area-->

<div id="content<?php echo $contentwidth; ?>" class="side_margins">



<?php if ($this->countModules( 'breadcrumb' )) : ?>

<div id ="breadcrumb" class="block_holder">

    <div id="breadcrumb-1"><div class="module_margin">

        <jdoc:include type="modules" name="breadcrumb" style="mod_standard" />

    </div></div>

    <div class="clear"></div>

</div>

<?php endif; ?>



<!--Modules ContentTop-->

<?php if($this->params->get('contenttop_auto') != '1') : ?>

<?php if ($this->countModules('contenttop-a') || $this->countModules('contenttop-b') || $this->countModules('contenttop-c')) { ?>

<div class="wrapper_contenttop">

            <?php if ($this->countModules('contenttop-a')) { ?>

            <div class="contenttop" style="width:<?php echo $contenttop_width ?>;"><div class="module_margin"><jdoc:include type="modules" name="contenttop-a"  style="mod_standard"/></div></div><?php } ?>

            <?php if ($this->countModules('contenttop-b')) { ?>

            <div class="contenttop" style="width:<?php echo $contenttop_width ?>;"><div class="module_margin"><jdoc:include type="modules" name="contenttop-b"  style="mod_standard"/></div></div><?php } ?>

            <?php if ($this->countModules('contenttop-c')) { ?>

            <div class="contenttop" style="width:<?php echo $contenttop_width ?>;"><div class="module_margin"><jdoc:include type="modules" name="contenttop-c"  style="mod_standard"/></div></div><?php } ?>

            <div class="clear"></div>

            </div>

<?php }?>

            

<?php else : ?>

            

<?php if ($this->countModules('contenttop-a') || $this->countModules('contenttop-b') || $this->countModules('contenttop-c')) { ?>

<div class="wrapper_contenttop">

            <?php if ($this->countModules('contenttop-a')) { ?>

            <div class="contenttop" style="width:<?php echo $contenttop_a_manual ?>%;"><div class="module_margin"><jdoc:include type="modules" name="contenttop-a"  style="mod_standard"/></div></div><?php } ?>

            <?php if ($this->countModules('contenttop-b')) { ?>

            <div class="contenttop" style="width:<?php echo $contenttop_b_manual ?>%;"><div class="module_margin"><jdoc:include type="modules" name="contenttop-b"  style="mod_standard"/></div></div><?php } ?>

            <?php if ($this->countModules('contenttop-c')) { ?>

            <div class="contenttop" style="width:<?php echo $contenttop_c_manual ?>%;"><div class="module_margin"><jdoc:include type="modules" name="contenttop-c"  style="mod_standard"/></div></div><?php } ?>

<div class="clear"></div>

</div>

    <?php }?>

<?php endif; ?>

<!--End Modules ContentTop-->



     <div class="maincontent">

            <div class="message">

                <?php if ($this->getBuffer( 'message' )) : ?>

                    <jdoc:include type="message" />

                <?php endif; ?>

            </div>

        <jdoc:include type="component" />

    </div>



<!--Modules ContentBottom-->

<?php if($this->params->get('contentbottom_auto') != '1') : ?>

<?php if ($this->countModules('contentbottom-a') || $this->countModules('contentbottom-b') || $this->countModules('contentbottom-c')) { ?>

<div class="wrapper_contentbottom">

            <?php if ($this->countModules('contentbottom-a')) { ?>

            <div class="contentbottom" style="width:<?php echo $contentbottom_width ?>;"><div class="module_margin"><jdoc:include type="modules" name="contentbottom-a"  style="mod_standard"/></div></div><?php } ?>

            <?php if ($this->countModules('contentbottom-b')) { ?>

            <div class="contentbottom" style="width:<?php echo $contentbottom_width ?>;"><div class="module_margin"><jdoc:include type="modules" name="contentbottom-b"  style="mod_standard"/></div></div><?php } ?>

            <?php if ($this->countModules('contentbottom-c')) { ?>

            <div class="contentbottom" style="width:<?php echo $contentbottom_width ?>;"><div class="module_margin"><jdoc:include type="modules" name="contentbottom-c"  style="mod_standard"/></div></div><?php } ?>

            <div class="clear"></div>

            </div>

<?php }?>

            

<?php else : ?>

            

<?php if ($this->countModules('contentbottom-a') || $this->countModules('contentbottom-b') || $this->countModules('contentbottom-c')) { ?>

<div class="wrapper_contentbottom">

            <?php if ($this->countModules('contentbottom-a')) { ?>

            <div class="contentbottom" style="width:<?php echo $contentbottom_a_manual ?>%;"><div class="module_margin"><jdoc:include type="modules" name="contentbottom-a"  style="mod_standard"/></div></div><?php } ?>

            <?php if ($this->countModules('contentbottom-b')) { ?>

            <div class="contentbottom" style="width:<?php echo $contentbottom_b_manual ?>%;"><div class="module_margin"><jdoc:include type="modules" name="contentbottom-b"  style="mod_standard"/></div></div><?php } ?>

            <?php if ($this->countModules('contentbottom-c')) { ?>

            <div class="contentbottom" style="width:<?php echo $contentbottom_c_manual ?>%;"><div class="module_margin"><jdoc:include type="modules" name="contentbottom-c"  style="mod_standard"/></div></div><?php } ?>

<div class="clear"></div>

</div>

    <?php }?>

<?php endif; ?>

<!--End Modules ContentBottom-->





<div class="modules-stacked-under"><!-- Stacking of side columns on small devices under main content -->

    <!--Side Columns Layout-->                          

    <?php if ($this->countModules( 'sidecol-a' )) : ?>

        <div id="sidecol_a" class="side_margins">

            <div class="sidecol_block">

                <jdoc:include type="modules" name="sidecol-a" style="mod_standard" />

            </div>

        </div>

    <?php endif; ?>

           

    <?php if ($this->countModules( 'sidecol-b' )) : ?>    

        <div id="sidecol_b" class="side_margins">

            <div class="sidecol_block">

                <jdoc:include type="modules" name="sidecol-b" style="mod_standard" />

            </div>

        </div>

    <?php endif; ?>

    <!--End Side Columns Layout-->

</div><!-- End Stacking of side columns on small devices under main content -->





</div>

<div class="clear"></div>

<!--End Content width and show component area-->

           

</div>

<div class="clear"></div>

Note: Replace s-tyle with style

Ciarán

Hi Ciarán

Works like a charm, thank you very much!

Kind regards,
Nicole

I would like to do the same for my template - Letterpress - to have the modules appear at the bottom except for the image slideshow. Will the same code you posted work? I only want the order changed for the portrait views on the iPad / tablet and the portrait and landscape views on the iPhone.

Hi bluedove

Yes this same code should work for your Letterpress template.

Ciarán

I copied the code you have in this thread and replaced it in the main.php file and it royally messed everything up.

If there is any way to get a response today it would be awesome. I'm trying to wrap this up for a client and this is the last element they need fixed.

Hello

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

Ciarán

Thank you Lisa

The above code is now working correctly for you.

Ciarán

Thanks. However, when I sent the email with the credentials, I requested the following order for the modules / content: I want the slideshow, then content, then top and sidebar modules. Currently the top modules are still above the content.

Also the font size changer appears twice in the responsive layout.

Please advise.

Also please tell me your hours so I can respond and get a quicker response.

Thanks

Hello

Sorry to say there is no customisation to place the top modules below the content on mobile devices. This post details how to place the sidecol modules below the content which is the only option available.

Ciarán

This code works fine, except for 1 tiny detail, although very important. In the code above the added styles have the line:

<s-tyle type="text/css">

so it starts with "s-tyle". But the real code should start with "style". It seems the forum software breaks the posted code and adds a hyphen.

I have the same problem, when I added this code, it messed things up a bit in a similar way to the previous poster, so I took it back out. I would like the side bars of my Pianoforte template to display below the main content too, on portrait tablets, if possible. Please can you help?

I have one other question regarding portrait tablet displays. My image link hover module works fine for landscape tablet views but the text gets cut off in portrait view. I found another post which i thought was relevant and added the code suggested to my custom css but that hasn't stopped the text from being cropped. This was the code I added:
.j51imagelinkhover .j51container {
background-position:50% center !important;
}

Is there anything I can do with custom css to stop the text being cut in half, or if not, can I stop the imagelinkhover module from displaying in portrait tablet views?

The site is http://www.hintonarms.co.uk

Hello

To change the stacking order of your side column modules try adding the following to the Body Custom Code field of your templates parameters...

<script type="text/javascript">

jQuery(document).load(jQuery(window).bind("resize", listenWidth));



    function listenWidth( e ) {

        if(jQuery(window).width()<959)

        {

            jQuery("#sidecol_b").remove().insertAfter(jQuery("#content_remainder"));

        } else {

            jQuery("#sidecol_b").remove().insertBefore(jQuery("#content_remainder"));

        }

        if(jQuery(window).width()<959)

        {

            jQuery("#sidecol_a").remove().insertAfter(jQuery("#content_remainder"));

        } else {

            jQuery("#sidecol_a").remove().insertBefore(jQuery("#content_remainder"));

        }

    }

</script>

For the linkhover module issue try adding the following to the Custom CSS field of your templates parameters...

@media only screen and (max-width: 959px) {

.module .j51imagelinkhover .j51button a {

    font-size: 12px;

    padding-left: 20px;

    text-align: left;

}}

Ciarán

Thank you for the stacking order code for the sidebar module, Ciarán. I put that in the custom css field (removing the hyphens) but it knocked the last menu item off the main menu bar above the slideshow module and dropped it to the next line so it was overlapping the slideshow. I have taken it back out for now, is there a tweak I can do to stop that happening, do you think?

Thanks for your help.

Have added the ipad code for the imagelinkhover, will need to check on the ipad later, so thank you for that too.

Sorry.. my fault. I meant to say the Custom Code field not the Custom CSS field!!

Ciarán

Actually, I have just realised that was my mistake, not yours! I read it wrong. :blush: Apologies but thank you for your prompt reply. I have put it in the correct place now. Will check on the ipad later.

Thanks again Ciarán.