logo-responsive
Welcome, Guest
Username: Password: Remember me

TOPIC: How to stack sidebars under content on responsive devices

How to stack sidebars under content on responsive devices 4 years 3 months ago #9996

  • JohnO
  • JohnO's Avatar
  • Offline
  • Administrator
  • Posts: 5450
  • Thank you received: 883
  • Karma: 99


This example works with Joomlage.com templates but the same method should apply to any site using a 3 column layout.
For Joomlage.com template users simply copy and paste this code into the bottom of the css/responsive.css file in your template.
For anyone else just looking to use this method in their code please read the explanation below the code. Note there are many methods that exist to achieve the same result, but this maybe the one that suits your requirements.

Code for stacking columns in responsive web design
@media only screen and (max-width: 767px) {
  #main {
      display:table;
  }
  #content_remainder {
      display: table-row-group;
        float: none !important;
    }
  #sidecol_a, #sidecol_b {
      display: table-footer-group;
        float: none !important;
  }
}

For non Joomlage.com websites simply replace the DIV names in the example code with those in your design.
In the code example we have a Div called Main.
Inside the Main Div we have our three columns
- #content_remainer (replace this with the div or class that holds your sites content area),
- #sidecol_a, #sidecol_b (replace each of these with the names of your side columns).





Thanks,
JohnO
Last Edit: 4 years 2 months ago by JohnO.
The administrator has disabled public write access.
The following user(s) said Thank You: competaweb
Time to create page: 0.103 seconds
Powered by Kunena Forum

Newsletter




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.

Use code   MAY20 at checkout

    MAY    

10% off Everything!

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.