Avisos
Vaciar todo

Modificar responsive/media queries para un elemento  

 
Miguel
 Miguel
Usuario eminente

Hola de nuevo,

 

Estoy tratando de ajustar un blockquote para que hasta un máximo 767px mantenga las siguientes propiedades:

margin: 1.5em 1em 1.5em 1em;

padding: 0.8em;

Lo he intentado personalizando el CSS de los ajustes de Astra con estas líneas:

@media (max-width: 767px) .blockquote {

margin: 1.5em 1em 1.5em 1em;

padding: 0.8em;

}

Pero no me lo coge. 

En la imagen adjunta, correspondiente a la URL que también adjunto (hay varios blockquotes), se ve como en menos de 768 píxeles, deja un margen y un paddin que quiero reducir.

¿Estoy citando correctamente a la id .blockquote con esa media query o deberia hacerlo de otra forma?

Como siempre, muchas gracias de antemano.

imagen

 

Contenido solo visible a usuarios registrados

Citar
Respondido : 13/05/2021 11:23 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Miguel,

Veo que estas tomando el código directo del inspector te explico el por que lo sé, este es tu codigo:

@media (max-width: 767px) .blockquote {
margin: 1.5em 1em 1.5em 1em;
padding: 0.8em;
}

Cuando debe estar escrito de la siguiente forma:

@media (max-width: 767px) {
.blockquote {
margin: 1.5em 1em 1.5em 1em;
padding: 0.8em;
}}

Como puedes ver la sentencia de máximo de ancho no está abierta y de esta forma se muestra directamente en el inspeccionador, toma en consideración que este media debe contener el otro código que se va a ejecutar en tu caso solo faltaban las llaves de apertura y cierre del mismo, te comparto una pequeña explicación de este tipo de código:

Contenido solo visible a usuarios registrados

Un saludo 🖐️ 

ResponderCitar
Respondido : 14/05/2021 12:21 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Miguel
 Miguel
Usuario eminente

Hola Argenis,

Gracias de nuevo por la respuesta, eres un crack! He revisado W3Schools (antes venía de ahi 😆) y añadiendo las llaves adicionales que me faltaban no he conseguido modificarlo. Pienso que la forma en que estoy planteando la media query con ese .blockquote no es correcta porque al aplicar los cambios desde el inspeccionador, sí que funciona

Seguiré probando y si se os ocurre algo, cualquier asistencia es bienvenida 🙂

Un saludo

ResponderCitar
Respondido : 14/05/2021 2:17 am
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Miguel,

Tienes toda la razon, disculpa no habia visto el punto que tienes antes en el blockquote, este no es una clase sino una etiqueta por lo que no debe llevar el . al inicio del nombre, verifica agregandolo de la siguiente forma:

@media (max-width: 767px) {
blockquote {
margin: 1.5em 1em 1.5em 1em;
padding: 0.8em;
}}

Igualmente recuerda que el max aplica para resoluciones que lleguen máximo a esa cantidad, es decir debes verificarlo en una resolución menor a la que ingreses.

Un saludo 🖐️ 

ResponderCitar
Respondido : 14/05/2021 2:32 am

Cursos Gratuitos WordPress

Miguel
 Miguel
Usuario eminente
Respondido por: @argenis

disculpa no habia visto el punto que tienes antes en el blockquote

Yo tampoco me fijé y eso que fui revisando W3School.

@Argenis ha funcionado! Era el detalle del punto antes de blockquote que dejé. Tras revisar con el inspector, perfecto para pantallas menos a 768px! Mil gracias!

Y tambien mil gracias a todos los moderadores de Webempresa. En un solo día me habéis asistido increíblemente con 3 temas y además he aprendido donde tocar mejor el CSS para evitar errores en un futuro. Sóis muy cracks! Un abrazo a tod@s

ResponderCitar
Respondido : 14/05/2021 12:37 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Miguel,

Gracias a ti, siempre en un placer poder ayudarte 😀 

Nos alegra mucho que este contentos con lo que hacemos, es lo que mas nos llena de ilusión

Escríbenos siempre que tengas cualquier consulta

Un Saludo 😊 

ResponderCitar
Respondido : 14/05/2021 12:43 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress