Avisos
Vaciar todo
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.
Contenido solo visible a usuarios registrados
Respondido : 13/05/2021 11:23 pm
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 🖐️
Respondido : 14/05/2021 12:21 am
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
Respondido : 14/05/2021 2:17 am
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 🖐️
Respondido : 14/05/2021 2:32 am
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
Respondido : 14/05/2021 12:37 pm
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 😊
Respondido : 14/05/2021 12:43 pm
