Cómo cambiar el orden de visualización en móvil del bloque de medios y texto

No me cansaré nunca de decir que el bloque de medios y texto es el más versátil y práctico de todos los que ofrece el editor de WordPress.

Su gran virtud está en que en un solo pantallazo ofrecemos al mismo tiempo información visual y de texto sobre el elemento que queramos destacar.

De hecho, la combinación de bloques de medios y texto inversos, uno detrás de otro, con más o menos diseño, es uno de los elementos de diseño más utilizados en las principales webs.

O sea…

  1. Bloque de medios y texto con imagen a la izquierda y texto a la derecha
  2. Bloque de medios y texto con texto a la izquierda e imagen a la derecha
  3. … y así sucesivamente

Pero no todo son buenas noticias…

Resulta que el bloque de medios y texto, por su propia orden natural, cuando insertamos bloques de medios y texto inversos de este modo, al verlos en dispositivos móviles no se alternan la imagen y el texto, sino que la estructura es:

  • Imagen
  • Texto
  • Texto
  • Imagen

En vez de mantener la visualización para ordenador de escritorio o tabletas de:

  • Imagen
  • Texto
  • Imagen
  • Texto

Afortunadamente, podemos resolver este problema con un poquito de código CSS, que alterará el orden de las columnas de los bloques de medios y texto, cuando se visualizan en dispositivos móviles, para que sea también:

  • Imagen
  • Texto
  • Imagen
  • Texto

El código simplemente tienes que añadirlo en el personalizador de WordPress, en la sección de CSS adicional, y es este:

/* Bloques de medios y texto alternos */
@media (max-width:600px) {
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
grid-column:1 !important;
grid-row:2 !important;
}
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
grid-column:1 !important;
grid-row:1 !important;
}
}

Cuando publiques los cambios los bloques de medios y texto inversos ya se verán en el mismo orden sus contenidos que cuando se visualizan en ordenador o en tableta…

Con este código CSS ya puedes añadir tantos bloques de medios y texto inversos como quieras y siempre tendrán el orden alterno, también en dispositivos móviles.

En este vídeo ves la magia…

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(4 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

1 comentario en “Cómo cambiar el orden de visualización en móvil del bloque de medios y texto”

  1. Fantástico como siempre Fernando, tambien hay un plugin que tu comentaste en un winar que yo he utilizado de vez en cudndo que funciona perfectamente.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido