I have a tabbed content on one of my pages and within one of the tabs I use the column layout. Everything looks fine on a desktop screen, however when viewing on a mobile device the column sections within the tab extend beyond the bounds and get cut off. Any ideas how to correct this without removing the column layouts?
Column layout within Tabbed content
6 posts from 2 voices- Started 8 months ago by mr_jason
- Latest reply from Devin
- This topic is closed
- This topic is resolved
-
Devin
ModeratorHi mr_jason,
Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
@media only screen and (max-width: 767px) { .responsive #top .container>.content{margin-bottom:0;width: 258px;} .responsive .container .one.unit, .responsive .container .one.units, .responsive .container .two.units, .responsive .container .three.units, .responsive .container .four.units, .responsive .container .five.units, .responsive .container .six.units, .responsive .container .seven.units, .responsive .container .eight.units, .responsive .container .nine.units, .responsive .container .ten.units, .responsive .container .eleven.units, .responsive .container .twelve.units, .responsive #top .one_fifth, .responsive #top .one_fourth, .responsive #top .one_third, .responsive #top .two_fifth, .responsive #top .one_half, .responsive #top .three_fifth, .responsive #top .two_third, .responsive #top .three_fourth, .responsive #top .four_fifth { margin: 0; margin-bottom: 10px; width: 226px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .responsive #top .container>.content{margin-bottom:0;width: 418px;} .responsive .container .one.unit, .responsive .container .one.units, .responsive .container .two.units, .responsive .container .three.units, .responsive .container .four.units, .responsive .container .five.units, .responsive .container .six.units, .responsive .container .seven.units, .responsive .container .eight.units, .responsive .container .nine.units, .responsive .container .ten.units, .responsive .container .eleven.units, .responsive .container .twelve.units, .responsive #top .one_fifth, .responsive #top .one_fourth, .responsive #top .one_third, .responsive #top .two_fifth, .responsive #top .one_half, .responsive #top .three_fifth, .responsive #top .two_third, .responsive #top .three_fourth, .responsive #top .four_fifth { margin: 0; margin-bottom: 10px; width: 388px; } }Its quite a bit but it looks like the grid needs some fixing for the next update. If this causes any other issues please let us know, I'll be tagged on the topic :)
Regards,
Devin
Posted 8 months ago #
Topic Closed
This topic has been closed to new replies.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
