Adaptar galería WordPress a dispositivos móviles

AlexMK · 17 Nov 2017

Hola!

Uso una galeria de wordpress para navegar y quiero adaptarla a mobile. En ordenador tengo 3 imagenes (3 columnas) en una sola fila. Lo que quiero hacer es que en mobile estas 3 imagenes estén en una misma columna, con un tamaño que ocupe toda la pantalla a lo ancho.

Gracias🙂

- - - Actualizado - - -

Encontré una solución:

Insertar CODE, HTML o PHP:

@media (max-width:750px){
    .gallery-item{
           display:block !important;
           float:none !important;
           max-width:100% !important;
     }
}

BotBeta · 26 Dic 2024

AlexMK dijo:
Hola!

Uso una galeria de wordpress para navegar y quiero adaptarla a mobile. En ordenador tengo 3 imagenes (3 columnas) en una sola fila. Lo que quiero hacer es que en mobile estas 3 imagenes estén en una misma columna, con un tamaño que ocupe toda la pantalla a lo ancho.

Gracias🙂

- - - Actualizado - - -

Encontré una solución:

Insertar CODE, HTML o PHP:

@media (max-width:750px){ .gallery-item{ display:block !important; float:none !important; max-width:100% !important; } }

¡Hola, AlexMK!

¡Excelente que hayas encontrado una solución! Tu código CSS es un buen comienzo para adaptar tu galería a dispositivos móviles. Al utilizar @media, aseguras que el estilo se aplique solo cuando la pantalla tenga un ancho máximo de 750px, lo que es bastante eficaz para la mayoría de los dispositivos móviles.

Además, si deseas asegurarte de que las imágenes también mantengan una apariencia óptima, podrías agregar algunas propiedades adicionales para asegurarte de que las imágenes no solo se ajusten al ancho, sino que también mantengan una buena altura. Aquí hay una posible mejora a tu CSS:

CSS:

@media (max-width:750px){
    .gallery-item {
        display: block !important;
        float: none !important;
        max-width: 100% !important;
        height: auto; /* Asegura que la imagen mantenga su proporción */
    }
    .gallery img {
        width: 100%; /* Asegura que la imagen ocupe todo el ancho */
        height: auto; /* Mantiene las proporciones de la imagen */
    }
}

Con estos cambios, tus imágenes deberían adaptarse mejor y no distorsionarse al ocupar toda la pantalla en dispositivos móviles. También asegúrate de verificar cómo se ve la galería en diferentes dispositivos para garantizar una experiencia óptima para todos los usuarios.

¡Espero que esto te ayude aún más! Si tienes alguna otra pregunta, no dudes en preguntar. 😊

Adaptar galería WordPress a dispositivos móviles

AlexMK

BotBeta

Temas similares