GMail está ignorando " mostrar: ninguno"

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

<div class="mobile" style="width:0; overflow:hidden;float:left; display:none"></div>

En sus consultas multimedia incrustadas, 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 height 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 contestado pensé chip con una solución que realmente funciona para mí en caso de que alguien tiene 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 escondía en Gmail (Explorer, Firefox y Chrome) o Outlook (2007,2010 & 2013). Resolví esto usando el siguiente código.

Aquí está mi contenido móvil:

<!--[if !mso 9]><!-->
<tr>
  <td style="padding-bottom:20px;" id="mobile">
    <div id="gmail" style="display:none;width:0;overflow:hidden;float:left;max-height:0;">
  <table cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td>
    <img src="imageurl" style="border:0;display:block;width:100%;max-height:391px;" />
          </td>
    </tr>
    <tr>
          <td style="border-left-style:solid;border-left-width:1px;border-left-color:#d5e1eb;border-right-style:solid;border-right-width:1px;border-right-color:#d5e1eb;background:#f7fafd;padding-top:15px;padding-bottom:15px;font-family:Arial,Helvetica,sans-serif;font-size:22px;color:#1c1651;padding-left:10px;padding-right:10px;text-align:left;" id="mobiletext" align="left">We're now on Twitter</td>
    </tr>
    <tr>
      <td style="border-left-style:solid;border-left-width:1px;border-left-color:#d5e1eb;border-right-style:solid;border-right-width:1px;border-right-color:#d5e1eb;background:#f7fafd;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#585858;padding-left:10px;padding-right:10px;text-align:left;line-height:24px;" id="mobiletext"><a href="#" style="text-decoration:none;color:#0068ca;">Follow us now</a> for some more info.
      </td>
    </tr>
    <tr>
      <td>
        <img src="imageurl" style="border:0;display:block;width:100%;max-height:37px;" />
          </td>
    </tr>                               
  </table>  
    </div>
  </td>
</tr>
<!--<![endif]-->

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

Como se puede ver en el código HTML anterior, envolviendo todo el contenido en estas etiquetas;

<!--[if !mso 9]><!--> <!--<![endif]-->,

Oculta el contenido de las versiones de Outlook que he mencionado. Para todos los otros 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 colocando ese código en línea.

Correcciones para Gmail

Ahora para Gmail, puedes ver que creé un 'especial' id llamado gmail que luego apliqué a un div dentro del <td>. Probé INNUMERABLES otros métodos de usar cosas como overflow:hidden en línea y todo tipo de otras combinaciones, pero esto es lo que funcionó para mí.

Así que en resumen, envolver el contenido en el <td> en un <div> que luego contiene el overflow:hidden,width:0 etc luego sobrescribir estos estilos dando al div un id de, en mi caso gmail resuelto el problema para mí.

De todos modos, tal vez alguien encontrará esto útil en el futuro!

El uso de display:none !important; resuelve el problema con gmail, pero luego es ignorado por Outlook 2007 y 2010. Redondeado esto usando display:none; display:none !important; De esta manera gmail utiliza una versión y Outlook 2007 y 2010 utilizar la otra.

Ya se ha dicho que display:none !important; funciona, pero nadie ha indicado un caso de uso para esto, así que daré uno en el que estaba trabajando cuando encontré esta pregunta y solución en SO.

Estaba creando un correo electrónico de varias partes con texto plano y html. En la fuente, html se genera a partir de archivos de plantilla, y el texto sin formato se crea a partir de etiquetas de eliminación del correo electrónico completo.

Para incluir texto adicional en el texto plano que no se muestra en el html, la forma más fácil es envolverlo en un <div style="display:none !important> que se eliminará cuando se genere el texto sin formato. Por ejemplo, si esta es tu plantilla:

<p>This is part of an html message template.</p>
<div style="display:none !important">=================================</div>
<div style="border-top:3px solid black;margin-top:1em;">
   <p>This is some footer text below a black line</p>
</div>

El HTML se renderizará como se espera (sin grupo de = ' s) y el texto plano con todos los div despojados será:

This is part of an html message template.
=========================================
This is some footer text below a black line.

Elimine el elemento de su código fuente por completo.

Los clientes de correo electrónico son muy estrictos con algunas reglas CSS. Además, dado que no se puede ejecutar JavaScript dentro del correo electrónico, un display: none no tiene ninguna función allí de todos modos, ¿verdad?

Gracias por esto, muy útil para mí.

Prueba max-height para Gmail esto debería recogerlo. a continuación, utilice max-height: inherit !importante; en el CSS esto debería eliminar el problema de espaciado:

<div class="mobile" style="display:none; width:0px; max-height:0px; overflow:hidden;">

@media only screen and (max-width: 480px) {
.mobile {
display:block !important;
margin: 0;
padding:0;
overflow : visible !important;
width:auto !important;
max-height:inherit !important;
}
}

Para ocultar un elemento en un correo electrónico HTML y hacer que funcione en Gmail, debe ponerlo a cero y ajustar el tamaño en su CSS (que Gmail ignorará).

Así:

<style>
    @media only screen and (max-width: 480px) { 
    *[class~=show_on_mobile] {
        display : block !important;
        width : auto !important;
        max-height: inherit !important;
        overflow : visible !important;
        float : none !important;
    }
</style>

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<!--[if !mso]><!-->
    <td style="width: 0; max-height: 0; overflow: hidden; float: left;">
    </td>
</tr>
<!--<![endif]-->
</table>

Además, el comentario condicional agregado lo cubre para Outlook 07.

Tengo una situación en la que acabo de tener un par de palabras. Utilicé font-size: 0px;.

<div style="font-size:0px">foo bar</div>

Funcionó para mí.

Basado en Dan S., otro ejemplo que uso con frecuencia.

@media only screen and (max-width: 480px) and (min-device-width: 320px) and (max-device-width: 480px) {
  p[class="hidden"] { /* I use this format to get past Yahoo Mail */
    display: block !important;
    visibility: visible !important;
    max-height: none !important;
  }
}

<td>
  <p class="hidden" style="display:none;visibility:hidden;max-height:0px;">You can't see me.</p>
</td>

Con gran placer, me gustaría compartir esta noticia con todos los que gmail ahora admite la propiedad CSS 'display:none' en las pruebas de EmailMonks. Pero necesita aplicar una clase con CSS mientras usa 'display: none', para no ser tocado por la herramienta de inserción.

Puedes leer más aquí

Si usted está experimentando problemas con Gmail la solución indicada en el número tres funcionó para mí también. Apliqué un enfoque similar usando etiquetas div y anulaciones en línea y luego definí un estilo CSS en la etiqueta head específica para gmail. Cada vez que quiero ocultar algo del escritorio de Outlook hago lo siguiente: si !mso. Ver ejemplo a continuación:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>

    <style type="text/css">
    So my code looks like this: 
    @media screen and (max-width : 480px) { div[id=gmail] {display:block!important;
        width:100%!important;
        overflow:visible!important;
        float:none !important;
        height:inherit!important;
        max-height:inherit!important;}
    }
    </style>
    <title></title>
    </head>
    <body>

<!--And the in the i have the following setting inline-->
<table>
<tr>
<td>
<div id="gmail" style=
"display:none;width:0;overflow:hidden;float:left;max-height:0;">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#E9E9E8"
align="center"><![if !mso]>
<tr>
<td valign="top">
<table width="133" bgcolor="#FFFFFF" style=
"border: 1px solid #c6c6c5;" cellpadding="0" cellspacing="0">
<!--My content--></table>
</td>
</tr>
<![endif]></table>
</div>
</td>
<!--This worked for me in Android 4.2 /4.1 /apple iOS
desktop web based: gmail, yahoo, Aol, Outlook.com in IE / FF and Chrome
desktop: outlook 2010--></tr>
</table>
</body>
</html>