Hola,
El contenido de cada pestaña se corta en dispositivos móviles, he aplicado algunos cambios con CSS pero no lo toma ni siquiera agregando !important
El estilo, si no me equivoco, está controlado por el complemento “TabWoo - Extra Tabs Plugin for WooCommerce”. Ya me comuniqué con ellos, pero mientras esperaba la respuesta decidí preguntar para ver si podían ayudarme.
El código que utilicé es:
/* 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;
}
Seguiré buscando la solución a este problema. Si la encuentro, la compartiré.
Después de ver un poco el código CSS encontré la solución.
Esto ocurre porque se está agregando relleno a un elemento que tiene un ancho establecido, lo que aumenta su tamaño general.
Incluí box-sizing: border-box; en el CSS y el problema se solucionó.
Código implementado:
.woocommerce div.product .woocommerce-tabs .panel.wc-tab {
box-sizing: border-box;
}
Así quedó el código completo:
/* 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;
}
.woocommerce div.product .woocommerce-tabs .panel.wc-tab {
box-sizing: border-box;
}
1 me gusta