Define different product tabs style for desktop and mobile

Hi, I would like to ask whether it is possible to have a ‘tabs’ style for product tabs on the desktop and an ‘accordion’ style for mobile. If I select the ‘tabs’ style, the tabs are shown only on the desktop and are missing from the mobile product.
Thanks in advance,
Olga

Hello,

By default the product tabs are set to be displayed as accordion for mobile devices.

You need to reload the page to make them appear.

If you are trying to ask anything else then please provide some relevant screenshots of the specific area to check it myself and help you out accordingly.

Regards.
Xtemos Studios

Hello,

about this one:

You need to reload the page to make them appear.

It is possible to show them directly? Nobody loads a page twice because the users don’t know they have to reload the page to see the product description etc.

Thank you
Regards
Andreas

Hello,

@Solartica Sorry but there is no option in Theme Settings available for that.

As this is the default behaviour of the tabs for the mobile devices.

Regards.
Xtemos Studios

Hello Aizaz,

thank you for your reply. But this makes no sense. How a user should know there is a description? There is no note nothing and in these days where users visit the website less than before to force a user to reload the page to get more info? Would it be possible to use the option accordion but remove the scroll on the desktop? So the whole text is visible?

These guys https://jannah.tielabs.com/ using a read more button on the mobile version where users can decide to watch more or not but just nothing isn’t a good solution.

I really like your theme and maybe you can find a way to fix that in the future.

Thank you
Have a nice day
Regards
Andreas

PS:

.tabs-layout-accordion .wd-scroll-content {
/* padding-right: 20px; */
/* max-height: 250px; */
}

.wd-scroll-content {
/* overflow: hidden; */
/* overflow-y: auto; */
-webkit-overflow-scrolling: touch;
/* max-height: 50vh; */
scrollbar-width: thin;
}

has no effect even when putting in child theme style.css

EDIT:

That here:

.tabs-layout-accordion .wd-scroll-content {
/* padding-right: 20px; */
max-height: 100%;
}

is working.

Hello,

@Solartica We are Glad that you managed to find a solution for yourself.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Best Regards.

[Author]

Posts