Gmail está ignorando “display:none”

Hola, hallamos la respuesta a tu búsqueda, deslízate y la encontrarás a continuación.

Solución:

Si style="display:none" no funciona en Gmail, pon style="display:none !important;"
y funciona en Gmail.

Para aquellos que llegan aquí con un problema similar relacionado con el desarrollo de correo electrónico móvil/de escritorio en y Gmail: si está utilizando consultas de medios y mostrando/ocultando contenido, el css incrustado no podrá sobrescribir la declaración importante en línea. En su lugar, puede usar overflow:hidden, así:

En sus consultas de medios incrustados, naturalmente deshará estos estilos para revelar el div y luego ocultará la versión de escritorio del contenido.

@media only screen and (max-width: 480px) 
 .mobile 
  display : block !important;
  width : auto !important;
  overflow : visible !important;
  float : none !important;
 
 .desktop 
  display : none !important;
 

Desafortunadamente, la propiedad de altura no funciona en Gmail; de lo contrario, sería una mejor solución, dado que esto crea una sección de espacio en blanco debajo del contenido visible igual a la altura del div.

Aunque esto ya ha sido respondido, solo pensé en contribuir con una solución que realmente funcionó para mí en caso de que alguien tenga este problema en el futuro. Es realmente una combinación de las respuestas anteriores y algo más que encontré en línea.

El problema que estaba teniendo era para Gmail y Outlook. Según el OP, el contenido móvil que tenía no se ocultaría en Gmail (Explorer, Firefox y Chrome) o Outlook (2007,2010 y 2013). Resolví esto usando el siguiente código.

Aquí está mi contenido móvil:

  
    

  

    

      

    
          
    
    

          
We're now on Twitter
    
    

      
Follow us now





 for some more info.
      
    
    

      

        
          
    
                               
  
  
    
  

Y aquí está el CSS:

@media only screen and (min-width:300px) and (max-width: 500px) { /* MOBILE CODE */
*[id=mobile] 
    width:300px!important;
    height:auto!important;
    display:block!important;
    overflow:visible!important;
    line-height:100%!important;
  
*[id=gmail]   
    display:block!important;
    width:auto!important;
    overflow:visible!important;
    float:none !important;
    height:inherit!important;
    max-height:inherit!important;
  

Correcciones para Outlook

Entonces, como puede ver en el código HTML anterior, envolver todo el contenido en estas etiquetas;

,

oculta el contenido de las versiones de Outlook que mencioné. Para todos los demás clientes de correo electrónico, el display:none; funciona bien También vi que también puedes usar mso-hide:all para ocultar cosas para Outlook, pero pensé que esto era un poco más fácil que colocar ese código en línea.

Correcciones para Gmail

Ahora para Gmail, pueden ver que creé un ‘especial’ id llamado gmail que luego apliqué a un div dentro del

. Probé MUCHOS otros métodos para usar cosas como overflow:hidden en línea y todo tipo de otras combinaciones, pero esto es lo que funcionó para mí.

En resumen, envolver el contenido en el

en un