Hey @lshenefield,
You could achieve that layout using flexbox with the following code:
.woocommerce div.product .woocommerce-tabs ul.tabs {
display: flex;
justify-content: space-between;
}
You should also consider taking the overflow-y: hidden; and the static height off of your tab area. Mobile user most likely won’t understand that is a scrollable area because I didn’t realize it was at first either. I was clicking the tabs and saw no change because the changes were hidden by the height and overflow properties.
Cheers,
Freddie
Thank you – that helped a LOT!
We’re alomost there… I would like the tabs to wrap to two levels on small screens. Is that possible?
Thank you,
Luke
@lshenefield,
Try using flex basis on the list items:
.woocommerce div.product .woocommerce-tabs ul.tabs li {
flex-basis: 50%;
}
Not there yet! I’m sorry – are the flex styles contradicting each other?
https://cbd.43designs.com/product/25-mg-cbd-isolate-breath-strips-by-curagenics/
.woocommerce div.product .woocommerce-tabs ul.tabs {
display: flex;
justify-content: space-around;
padding: 10px;
text-align: left;
direction: ltr;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
font-size: 16px;
flex-basis: 50%;
}
.woocommerce-tabs {
height: auto;
}
.woocommerce-tabs .tabs li > a {
padding: 8px;
}
}
