Problem whit Tabs in WooCommerce

Hey there!

The styling for this would be controlled by the theme, have you reached out to the theme developer about this already?

Hi,

The style, if I’m not mistaken, is controlled by the “TabWoo – Extra Tabs Plugin for WooCommerce” plugin. I’ve already contacted them, but while waiting for the answer I decided to ask around to see if they could help me.

The code I used is:

/* Estilos de Tabs Movil */
.woocommerce div.product .tw-main-outer-wrapper.tw-tab-template-template10 .woocommerce-tabs .panel.wc-tab {
    background-color: #eff0f2;
}
.woocommerce div.product .tw-main-outer-wrapper .woocommerce-tabs .panel.wc-tab {
    padding: 20px !important;
}

@media screen and (max-width: 768px)
.woocommerce div.product .tw-accordion_enabled .woocommerce-tabs .panel {
    margin-bottom: 0;
}
media="(max-width: 768px)"
.woocommerce div.product .woocommerce-tabs .panel {
    margin-top: 0 !important;
}

media="(max-width: 768px)"
.woocommerce div.product .woocommerce-tabs .panel, .woocommerce div.product .woocommerce-tabs ul.tabs {
    float: none;
    width: 90px !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
    margin: 0 0 2em;
    padding: 0;
}

I will continue to look for the solution to this problem. If I find it, I will share it.

This occurs because you’re adding padding to an element that has set width, which increases its overall size.

I included box-sizing: border-box; in the CSS and the problem was solved.

Code implemented:

.woocommerce div.product .woocommerce-tabs .panel.wc-tab {
    box-sizing: border-box;
}