[Resolved] Product Tabs on Mobile

Home Forums Support Product Tabs on Mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1250576
    GeneratePress User

    Hey all,

    This may be out of scope (no pressure to respond if so) – apologies in advance if that’s the case.

    I’ve got tabs setup on the product pages of my online store, one is the default description, and I’ve got some custom ones with the app Custom Product Tabs. They all seem to use the same base code for how the tabs display (either from WooCommerce or GeneratePress I’m guessing.)

    Either way, I’ve just launched the site and have noticed users have been having issues on mobile tapping into the different tabs. It seems only the tappable part of the tab is the text rather than the whole tab itself. I’ve tried putting in whitespace on the tab labels to pad out the tappable area but that causes issues with how it displays on desktop. Any idea if there’s any easy way I can set the whole tabs to be tappable rather than just the text?

    Screenshot showing tabs: screenshot.

    Thanks.

    #1250916
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS to fix that:

    @media (max-width: 768px) {
        .woocommerce div.product .woocommerce-tabs ul.tabs li a {
            display: block;
        }
    }
    #1251981
    GeneratePress User

    Thanks so much for your help David! That’s perfect.

    #1252757
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.