Archived topic

Product Tabs on Mobile

3 replies · Started by GeneratePress User on April 23, 2020

Viewing posts 1–4 of 4

April 23, 2020 at 12:47 am #1250576

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.

April 23, 2020 at 3:59 am #1250916

Hi there,

try adding this CSS to fix that:

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

April 23, 2020 at 12:05 pm #1251981

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

April 24, 2020 at 1:15 am #1252757

You're welcome

This archived topic is closed to new replies.

Start building better websites today.