Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #21741

    The vertical tabs are great… but when any column info it added, these content areas, at mobile resolution, don’t keep the width they should… i.e. the copy runs past the side margin of the container and disappears.

    This is the page demonstrating it…

    http://djdevelopment.net/2/start-to-finish-literacy-starters/

    and see a screenshot of mobile resolution…

    http://djdevelopment.net/2/tabs.png

    Can you please help? Thanks!

    #112918

    Hi mgma,

    The page you linked doesn’t have the same content as the screenshot. Could you point us to an example showing the issue?

    Regards,

    Devin

    #112919

    Here it is…

    http://djdevelopment.net/2/starttofinish-literacy-starters/

    Had to change the URL slightly to get the portfolio link to recognize it.

    Thanks!

    #112920

    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 .sidebar_tab_inner_content .one_fifth,
    .responsive #top .sidebar_tab_inner_content .one_fourth,
    .responsive #top .sidebar_tab_inner_content .one_third,
    .responsive #top .sidebar_tab_inner_content .two_fifth,
    .responsive #top .sidebar_tab_inner_content .one_half,
    .responsive #top .sidebar_tab_inner_content .three_fifth,
    .responsive #top .sidebar_tab_inner_content .two_third,
    .responsive #top .sidebar_tab_inner_content .three_fourth,
    .responsive #top .sidebar_tab_inner_content .four_fifth { margin: 0; margin-bottom: 10px; width: auto; }
    }
    @media only screen and (min-width: 480px) and (max-width: 767px) {

    .responsive #top .sidebar_tab_inner_content .one_fifth,
    .responsive #top .sidebar_tab_inner_content .one_fourth,
    .responsive #top .sidebar_tab_inner_content .one_third,
    .responsive #top .sidebar_tab_inner_content .two_fifth,
    .responsive #top .sidebar_tab_inner_content .one_half,
    .responsive #top .sidebar_tab_inner_content .three_fifth,
    .responsive #top .sidebar_tab_inner_content .two_third,
    .responsive #top .sidebar_tab_inner_content .three_fourth,
    .responsive #top .sidebar_tab_inner_content .four_fifth { margin: 0; margin-bottom: 10px; width: auto; }
    }

    Regards,

    Devin

    #112921

    Devin… thank you so much. That did it.

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

The topic ‘Tabs content problem in mobile resolution…’ is closed to new replies.