Recent
Categories
View Replies (4)

Modules responsive (mobile)

0
Votes
Undo
  1. fabrix95
    fabrix95
  3. Commercial Templates
  4. Thursday, 04 June 2015
  5.  Subscribe via email
Hi,

I'm using J51 Classic. If I open my website from mobile devices the first thing that I see is the right modules (Sidecol-B ), but I should be see first of all page content (article for example).

How can I put modules after content of pages in mobile version? Otherwise is very uncomfortable.

EDIT Sorry for my mistake, this topic should be in "Free Templates / Extensions" category
Responses (4)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

May I suggest the following on this query.. http://www.joomla51.com/forum/8-commercial-templates/6987-problem-sidebar-col-j51-habitate#16824

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
fabrix95
fabrix95
Accepted Answer Pending Moderation
0
Votes
Undo
I insert this code, but in mobile view is the same
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

An alternative solution is to replace the contents of your templates main.php (../templates/php/layouts/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>


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
fabrix95
fabrix95
Accepted Answer Pending Moderation
0
Votes
Undo
Appears this code in the website (I think there's an error)

@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;}
}
  1. more than a month ago
  2. Commercial Templates
  3. # 4
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok