Si te encuentras en la situación que no puedes eliminar los estilos css de un elemento en tu web desde la propia hoja de estilos, pues llegaste al lugar correcto porque te vamos a enseñar como puedes eliminar o hacer que desaparezcan los estilos de un elemento html desde la propia hoja de estilos css. Pero no solo eso sino que te ofrecemos un ejemplo para ocultarlo o eliminarlo cuando el tamaño se adapte o sea responsive.
Uno de los truquillos en CSS que nos pueden ayudar son los famosos @media, esta propiedad se utiliza para decirle a nuestro código css que debe aplicar una cierta preferencia de estilos tras ocurrir un evento en el navegador.
Eliminar estilos o elemento html con CSS
Para ser sincero estuve un tiempo rompiéndome la cabeza para lograr esto y la verdad que eras más sencillo de lo que creía, el código para desactivar elementos web perteneciente al HTML de nuestra página mediante simple CSS puede ahorrarnos mucho trabajo y dolores de cabeza, la mayor de las veces solemos usarlo cuando un elemento no funciona dentro de nuestra web correctamente en su versión móvil o de escritorio ya que su estructura responsive no es correcta.
En este ejemplo , hemos desactivado los estilos de un elemento cuya clase se llama .ejemplo cuando su tamaño es menor a 992px, tamaño ajustable que suele tomar nuestra web en un navegador de un móvil. Este código funciona tanto en WordPress, o cualquier CMS o proyecto web que utilize CSS como hoja de estilos.
@media (max-width: 992px) {.ejemplo {display: none;}}
También puedes hacer que aparezcan ciertos estilos para cuando el tamaño sea el de un PC o tablet. El ejemplo de agregar o quitar los estilos css para responsive en versión PC es el siguiente:
@media (min-width: 1600px) {.ejemplo {background-size: 100%;position: absolute;top: 87%;left: 100px;background-repeat: no-repeat;margin-left: -300px;}}
Espero que les sirva de ayuda el ejemplo anterior y la solución que te ofrecemos, existe otras formas de hacerlo vía javascript, etc.
Te puede interesar:
Array