Tabs Layout

Hello!

In my theme settings, i choose “Tabs” for my product page tabs layout
but when i change screen size to tablet and mobile size, it turns to accordion layout
how can i force mobile and tablets to display tabs instead of accordion?
Its important for me

Thanks.

Hi,

Try to add the following code snippet to the Custom CSS area for mobile and tablet devices in Theme Settings to change this behavior

div.tabs-layout-tabs .tabs {
   display: block;
}

div.tabs-layout-tabs .woodmart-accordion-title {
   display: none;
}

div.tabs-layout-tabs {
    border:none;
}

div.tabs-layout-tabs .tabs {
    margin-top:-25px;
}

div.product-tabs-wrapper {
   border-top: 1px solid rgba(129,129,129,.2);
   border-bottom: 1px solid rgba(129,129,129,.2)!important;
}

div.tabs-layout-tabs .woodmart-tab-wrapper {
    border-bottom:none;
}

div.tabs-layout-tabs .woodmart-tab-wrapper .wc-tab {
    padding-bottom:0;
}

Regards

Thank you so much.
in product page settings, related product view > slider & grid, whats the difference of this two? i change this option but nothing happens in product page! no change on related product section …

Could you please send us a link where we can see this on your website?

Hi, could I have help styling woocomerce tabs for mobile with the above code?

@media (max-width: 549px)
.small-nav-collapse>li a {
width: 100%;
display: block;
}
.nav-outline>li>a {
line-height: 2.4em;
padding: 0 .75em;
position: relative;
z-index: 10;
border: 2px solid transparent;
border-radius: 32px;
}
.nav>li>a {
font-size: .8em;
}
.nav-uppercase>li>a {
letter-spacing: .02em;
text-transform: uppercase;
font-weight: bolder;
}

[Author]

Posts