WooCommerce product information tabs in mobile view

[bruceburgoyne]

Hello,

We are having a problem with the way the product tabs display on mobile view. They are stacked vertically on desktop, with the information to the right. On mobile, they are in a row, with the information below. You have to scroll across the row to select the last tab and it isn’t immediately obvious to some users.

The URL is https://sibbons.mackdev.co.uk/product/from-snickers-hiker-non-safety-shoe-sold-gear/

Is there a way to make these stack on mobile and not show in tabs?

Example images attached.

Cheers,
Soph

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi Soph,

Please add this to Theme Options => Custom CSS:

@media only screen and (max-width: 767px) {
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    width: 100%!important;
    clear: both !important;
    display: block!important;
    margin: 0 0 0 0!important;
}
}

[bruceburgoyne]

This reply has been marked as private.

[bruceburgoyne]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

The Themeforest API takes some time to send us the info.

-Rui