|
Welcome,
Guest
|
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
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 |
|
|
|
