Multiple Tabs not working on mobile screen, provided css is not working

  • Resolved karinhiking

    (@karinhiking)


    4 years, 7 months ago

    Hi there,

    thank you for this great plug-in. I have a question related to mobile view. I’ve seen a similar question but the CSS Code @media only screen and (max-width: 719px) {
    .woocommerce-tabs div.woocommerce-Tabs-panel {
    display: block !important;
    }
    }

    did not work in my case or for my theme. Everything works perfect on a regular screen or with max. 3 tabs, but on the mobile screen, if there are more than 3, the tabs are not showing the content and it does not look nice. Is there maybe a different CSS for this problem? Many thanks in advance!

    The page I need help with: [log in to see the link]

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

  • Hey @karinhiking,

    Try this css:

    @media only screen and (max-width: 719px) {
 .woocommerce-tabs .tabs ul {
    display: flex;
    overflow-x: scroll;
  }
}

    This should make them a row and then it will be right left scrollable on mobile.

    Cheers,
    Freddie

    Thread Starter karinhiking

    (@karinhiking)

    Hi Freddie,

    thanks for the code. I tried it, but it does not make any difference. It shows several rows on mobile screen and I cannot see an option to scroll left or right…

    Thank you,
    Karin

    @karinhiking,

    Sorry about that it looks like you’re having some css clashes but this one will work:

    @media only screen and (max-width: 719px) {
    .woocommerce-tabs ul.tabs {
        display: flex;
        overflow-x: scroll !important;
    }
}

    Cheers,
    Freddie

    Thread Starter karinhiking

    (@karinhiking)

    Hi Freddie,

    great, it works now ?? Thank you! I’m just wondering if users will figure out that they can scroll, because there are no arrows shown…but it looks definitely more elegant than before.

    Have a nice day,
    Karin

    Thread Starter karinhiking

    (@karinhiking)

    Thanks again!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Multiple Tabs not working on mobile screen, provided css is not working’ is closed to new replies.