Estoy haciendo una pagina con Wordpress usando GeneratorPress.
Tengo un bloque (div) que me gustaría que desapareciera en dispositivos móviles y otro que hiciera lo mismo al aparecer en escritorio. ¿Como podría conseguir esto ?
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadRevisa la documentación de GeneratorPress para la gestión del diseño responsive https://docs.generatepress.com/article/responsive-display/ Para saber que estilo de CSS está aplicando a esos elementos puedes visualizalo con la consola del navegador (en Chrome es Ctrl+Shift+C) seleccionas el elemento que quieres inspeccionar, en tu caso seria ese div y verás a la derecha en la consola del navegador varias pestañas ( te pongo el ejemplo de usar google Chrome). Por defecto verás la pestaña Elements donde aparecerá todo el codigo html. Habrá otra subseccion a la derecha (Styles,computed,Layout, etc) en la subsección de styles puedes ver el CSS que se está aplicando al elemento que has seleccionado (el div que comentas), el problema suele ser que wordpress aplica muchos estilos desde diferentes sitios. Para poder ver la prioridad de estilos y cual tiene aplicado tienes que ir a la subsección Computed donde te muestra todas las propiedades del elemento y los estilos CSS que tiene aplicados, aparecerán varias lineas, la priodidad la tiene el elemento que haya más arriba. Aquí tienes la documentación de google chrome https://developers.google.com/web/tools/chrome-devtools/css/reference. Una vez que identificas cual de los estilos tiene aplicado ese elemento tienes que ver de donde viene en wordpress, si lo aplica el tema, el builder o el css personalizado. El css tiene una estructura de preferencias que debes conocer para poder sobreescribir esa propiedad que te está dando problemas de la manera correcta, aquí tienes la información de como funcionan las preferencias de propiedad de CSS https://www.w3schools.com/css/css_specificity.asp
@media (max-width:768px) { ...}
. Mira por ejemplo esta respuesta