Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* CSS for responsive product tabs in WooCommerce. See my blog post here: https://www.timrosswebdevelopment.com/responsive-product-data-tabs-woocommerce */
/* For small screens only */
@media screen and (max-width: 767px) {
.woocommerce-tabs.woocommerce-tabs-responsive ul li {
/* this rule needs to be important to override the default woocommerce style */
display: flex !important;
flex-direction: column;
width: 100%;
}
.woocommerce-tabs.woocommerce-tabs-responsive .woocommerce-Tabs-panel {
/* this rule needs to be important to override the default woocommerce style */
display: none !important;
}
.woocommerce-Tabs-accordion-content {
display: none;
}
.woocommerce-tabs.woocommerce-tabs-responsive ul li.active .woocommerce-Tabs-accordion-content {
display: block;
}
}
/* On larger screens make sure the accordion does not show. */
@media screen and (min-width: 768px) {
.woocommerce-Tabs-accordion-content {
display: none !important;
}
.woocommerce-tabs.woocommerce-tabs-responsive ul li {
display: inline-flex;
width: auto;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment