Hola @alexsevilla
Veamos necesitas utilizar las media queries y modificar el width para definirlo al 100% en vez de usar el predeterminado.
Aqui veras como esta definido; https://github.com/WordPress/WordPress/blob/master/wp-includes/css/dist/block-library/style.css#L899
Tendras que copiarlo y añadirlo en el CSS Adicional modificando el width y margin por 100% y 0 respectivamente.
hola @kallookoo
He intentado como me indicas, pero cambiándolo de ese modo se me cambia completamente y no solo en la versión móvil como necesito.
Gracias
Hola @alexsevilla
El estilo es mobile first y por lo tanto tienes que añadir tantas media queries como sean necesarias.
En el codigo que te puse indica que para dispositivos iguales o superior a 600px el width para las columnas se cambiara.
Aqui veras un ejemplo copiado de la documentacion del framework bootstrap.
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
Luego tienes que pensar que el propio theme pueda tener su propio estilo te lo comento porque usas un cache y por lo tanto no he podido saber que theme usas.
Pero igualmente defines todo al 100% al principio y sin margin; luego cuando tu quieras que se cambie usa una media de las que puse antes y vas modificando el width y margin usando como ejemplo el propio codigo del WordPress o del theme si es que lo tuviese.
Hola @kallookoo
uso el GeneratePress,
perdona pero no te he entendido muy bien lo que intentas explicarme.
-
Esta respuesta fue modificada hace 2 años, 11 meses por
alexsevilla.
Hola @alexsevilla
Los estilos visuales tal y como estan definidos usan lo que se conoce como mobile first, eso significa que se definen unos genericos y luego por cada tamaño de pantalla se va modificando lo necesario.
Viendo lo que me comentas deduzco que no sabes de programacion, asi que te costara un poco mas pero con paciencia y prueba-error diria que lo conseguiras.
Basicamente tienes que usar el CSS definido (que tienes en el enlace que puse) y copiar la media @media (min-width: 600px) { /* Codigo CSS del bloque galeria */ } y modificarlo en el CSS Adicional y luego si por ejemplo quieres que se vea en tablets y dispositivos mayores con diferentes anchos incluir @media (min-width: 768px) { /* El codigo original*/ } y asi sucesivamente.
Como comprederas o eso espero es bastante codigo y no lo incluyo ya que tu eres quien decide como y cuando se cambia el ancho.
Te sugiero que con algun editor copies el CSS y luego lo modifiques, cuando lo tengas pegalo en el CSS adicional y compruebas como queda.
Por cierto, en tu caso al usar ese theme creo recordar que no interfiere ya que el CSS es el del propio WordPress.
Buenas @kallookoo
Ante todo gracias por tu paciencia,
es cierto que estoy aprendiendo poco a poco de programación y tengo nociones muy básicas.
He intentado cambiarlo como pienso que indicas pero solo consigo que salga la imagen de una en una en todos los formatos tanto en web como en Tablet como en móvil.
Lo que pretendo es que en pantas más grandes que la de un móvil se quede tal y como está, pero que en los móviles las imágenes si se vean de una en una (algo que a pesar de tu esfuerzo no consigo)
Gracias y un saludo.
En otros temas con este fragmento de código siempre he solucionado el problema, pero en esta ocasión no funciona.
@media screen and (max-width: 480px) {
.gallery-columns-3 .gallery-item {
max-width:100%;
}
}
Lo he conseguido, creo que realmente todo era desconocimiento por mi parte, en el código que me indicabas
@media (<strong>min</strong>-width: 600px) {
.wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item,
.blocks-gallery-grid.columns-3 .blocks-gallery-image,
.blocks-gallery-grid.columns-3 .blocks-gallery-item {
width: calc(50% - 0.6666666667em);
margin-right: 1em;
}
@media (<strong>max</strong>-width: 600px) {
.wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item,
.blocks-gallery-grid.columns-3 .blocks-gallery-image,
.blocks-gallery-grid.columns-3 .blocks-gallery-item {
width: calc(50% - 0.6666666667em);
margin-right: 1em;
}
Cambien que el mínimo por el máximo que por mucho que cambiaba configuraciones no apreciaba ese punto.
Hola @alexsevilla
Me alegro! Pero veo que solo añades cuando solo sean 3 columnas, piensa o acuerdate que podrias usar 4, 5, etc… y te pasara lo mismo. Si no tienes pensado usarlas nunca, olvidate de este comentario.
Por cierto, cuando puedas marcalo como resuelto para asi ayudar en la organizacion del foro.
Gracias
