Psychotik

solucionando marrones desde 2003

Gmail, mostrar/ocultar contenido de nuestro mailing para escritorio o móvil

Pertenece a  Tips rápidos  el 31 octubre

Dado que un altísimo porcentaje de los e-mails ya se leen directamente desde móviles y tablets nuestras newsletter deberían estar adaptadas, si utilizamos la manera fléxible, con % para los anchos/altos nos podemos apañar sin problema para cosas simples, pero si necesitamos maquetaciones algo más complejas, nos encontraremos que debemos hacer en un mismo fichero dos diseños, uno para escritorio y otro para smartphones. Aunque en apariencia nos valdría con utilizar display:none y display:block para mostrar/ocultar lo que queremos según las medidas que le demos a nuestra etiqueta @media seguramente os encontraréis que Gmail, sobre todo la versión web (e incluso algunas versiones de Outlook) se lleva bastante mal con esta etiqueta y pasan olímpicamente de ella, y por tanto os muestran todo el contenido, lo cual es una faena, aunque la solución es “secillita”…

La solución

/* En el contenido para móvil que queremos ocultar por defecto para escritorio le añadimos propiedades para indicar que sea un bloque "físico" con float, y que no tenga ni alto ni ancho ni visibilidad, así quedará oculto */
‹table class="contenidoMovil" style="width:0; max-height:0; overflow:hidden; float:left;"›Aquí tr/td/nuestro contenido/...‹/table›
/* En nuestro ‹style› le decimos en que resolución queremos que oculte/muestre nuestro contenido */
@media only screen and (max-width: 480px) {
   /* Para ocultar basta con añadir !important */
   .contenidoEscritorio{
      display:none!important;
   }
   /* Para lo que queremos mostrar utilizamos varios parámetros relacionados con la visibilidad */
   .contenidoMovil{
      display:block!important;
      width:auto!important;
      max-height:inherit!important;
      overflow:visible!important;
      float:none !important;
   }
}

A día de hoy Gmail sigue siendo muy suyo para ciertos detalles de CSS, para esto mismo haya alguna que otra solución más pero esta me parece la que menos dolores de cabeza da (alguno pensará que se puede simplificar solo jugando con display:none!important y display:block!important, pero cuidado, como indicaba arriba, Gmail se lleva bastante mal con los display y no suele funcionar).


Volver atrás

Deja un comentario

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

¡Lo está petando!

Volver arriba
Utilizamos cookies para garantizar que tu experiencia en Psychotik sea la mejor posible
Saber más sobre nuestras galletitas »