Note that there are some explanatory texts on larger screens.

plurals
  1. POGmail CSS Styling
    primarykey
    data
    text
    <p>I am having some CSS issues with Gmail. My HTML email is responsive and works on iPhone great but when being sent to Gmail, it displays the "mobile_toolbar" and "full_toolbar". I need to get rid of the mobile toolbar so the email is formatted correctly for Gmail Desktop.</p> <p>I have already tried using display:none !important but it is not working.</p> <p>Thanks!</p> <p>CSS:</p> <pre><code>&lt;style type="text/css"&gt; .ReadMsgBody {width: 100%; background-color: #ffffff;} .ExternalClass {width: 100%; background-color: #ffffff;} body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family:Arial} table {border-collapse: collapse;} p {font-family: Arial, serif;} a {font-family: Arial, serif;} @media only screen and (max-width: 640px) { body[yahoo] .deviceWidth {width:440px!important; padding:0;} body[yahoo] .center {text-align: center!important;} #full_toolbar {display:none !important;} #mobile_toolbar {display:block; background:white;} #mobile_toolbar a {text-decoration:none;} } @media only screen and (max-width: 479px) { body[yahoo] .deviceWidth {width:280px!important; padding:0;} body[yahoo] .center {text-align: center!important;} } @media screen and (min-width: 641px) and (max-width: 1920px) { *[id=mobile_toolbar] { display:none!important; overflow:hidden!important; } } </code></pre> <p></p> <p>HTML:</p> <pre><code> &lt;div id="full_toolbar"&gt;&lt;img usemap="#toolbar" class="deviceWidth" src="images/main_toolbar.jpg" alt="" style="display: block; border-radius: 4px;" border="0"&gt; </code></pre> <p> </p> <pre><code> &lt;div id="mobile_toolbar" &gt; &lt;a href="#"&gt;&lt;div style="margin-bottom: 5px; width:100%; height:100%; color:black; background:#a4a4a4; font-weight: bold;"&gt;New Inventory&lt;/div&gt; &lt;a href="#"&gt;&lt;div style="margin-bottom: 5px; width:100%; color:black; background:#a4a4a4; font-weight: bold;"&gt;Used Inventory&lt;/div&gt; &lt;a href="#"&gt;&lt;div style="margin-bottom: 5px; width:100%; color:black; background:#a4a4a4; font-weight: bold;"&gt;Services&lt;/div&gt; &lt;a href="#"&gt;&lt;div style="margin-bottom: 5px; width:100%; color:black; background:#a4a4a4; font-weight: bold;"&gt;Directions&lt;/div&gt; &lt;a href="#"&gt;&lt;div style="margin-bottom: 5px; width:100%; color:black; background:#a4a4a4; font-weight: bold;"&gt;Contact&lt;/div&gt; &lt;a href="#"&gt;&lt;img src="images/twitter.jpg"&gt;&lt;/a&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a href="#"&gt;&lt;img src="images/facebook.jpg"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/a&gt;&lt;a href="#"&gt;&lt;img src="images/youtube.jpg"&gt;&lt;/a&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a href="#"&gt;&lt;img src="images/google.jpg"&gt;&lt;/a&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload