[Resolved] Product Tabs on Mobile

[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.

[David]

Hi there,

try adding this CSS to fix that:

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

[GeneratePress User]

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

[David]

You’re welcome

[Author]

Posts