Desactivar elementos CSS en la versión móvil – responsive

Hay pequeños grandes trucos en CSS que nos pueden sacar de grandes apuros.

En particular el código para desactivación de elementos web mediante simple CSS puede ahorrarnos muchos quebraderos de cabeza cuando un elemento no funciona correctamente en su versión responsive.

En este ejemplo que pongo a continuación, he desactivado el “Layer Slider” para WordPress en las versiones tablet y móvil. Tan sólo he necesitado localizar el elemento ( .ls-container) que corresponde a “Layer Slider” y en la hoja de estilo del tema hijo he incluido las siguientes líneas de código:


@media handheld, only screen and (max-width: 767px) {
.ls-container {
display:none;
}
}

@media only screen and (max-width: 1023px) {
.ls-container {
display:none;
}
}

 

Voilá! Testeando con mobiletest.me, veo que el elemento ha desaparecido sin problemas.

Lo mismo para cualquier parte del template que queramos fulminar de nuestra versión móvil .

5 comentarios de “Desactivar elementos CSS en la versión móvil – responsive

  1. Jesus dice:

    Hola que tal? estoy tratando de desactivar el campo de cantidad en el carrito de woocommerce usé .product-quantity {display:none} y funciona en la versión pc pero en la móvil no, tome tu código y lo aplique pero no se refleja ningún cambio en la versión móvil que crees que esté haciendo mal? gracias.

    @media handheld, only screen and (max-width: 767px) {
    .product-quantity {
    display:none;
    }
    }

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *