Tabs Layout

This topic has 4 replies, 3 voices, and was last updated 5 years, 6 months ago by Anonymous.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
January 18, 2018 at 9:26 am #33954

wanila
Participant

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.

January 18, 2018 at 10:12 am #33982
Artem Temos
Keymaster
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
January 18, 2018 at 12:05 pm #34009

wanila
Participant

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 …

January 18, 2018 at 12:05 pm #34011

Artem Temos
Keymaster

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

May 19, 2019 at 4:38 pm #124531

Anonymous
Inactive

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