• Resuelto alexsevilla

    (@alexsevilla)


    Buenas noches,

    Me gustaría que en la versión móvil se vieran las imágenes de una en una y no de dos en dos como se ven actualmente.
    He intentado con fragmentos de código CSS pero ninguno me ha funcionado por el momento.

    Gracias y un saludo.

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 9 respuestas - de la 1 a la 9 (de un total de 9)
  • kallookoo

    (@kallookoo)

    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.

    Iniciador del debate alexsevilla

    (@alexsevilla)

    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

    kallookoo

    (@kallookoo)

    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.

    Iniciador del debate alexsevilla

    (@alexsevilla)

    Hola @kallookoo
    uso el GeneratePress,
    perdona pero no te he entendido muy bien lo que intentas explicarme.

    • Esta respuesta fue modificada hace 2 semanas por alexsevilla.
    kallookoo

    (@kallookoo)

    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.

    Iniciador del debate alexsevilla

    (@alexsevilla)

    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.

    Iniciador del debate alexsevilla

    (@alexsevilla)

    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%;
    }
    }
    Iniciador del debate alexsevilla

    (@alexsevilla)

    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

Viendo 9 respuestas - de la 1 a la 9 (de un total de 9)
  • Debes estar registrado para responder a este debate.