Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #16229

    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?

    #90676

    Hey mr_jason,

    Can we take a look at it live? Probably need to create a new rule for you to only effect mobile layouts and adjust the columns accordingly.

    Regards,

    Devin

    #90677

    The page is — edited out —

    #90678

    Hi 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

    #90679

    Please delete this thread.

    #90680

    Hey mr_jason,

    I removed the link (I assume that’s the reason you wanted it deleted) but I’ll need to leave the topic active until the updates to the grid are implemented.

    Regards,

    Devin

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Column layout within Tabbed content’ is closed to new replies.