Gmail CSS Styling

Question

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.

I have already tried using display:none !important but it is not working.

Thanks!

CSS:

<style type="text/css">
.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;

 }

        }   

HTML:

                    <div id="full_toolbar"><img usemap="#toolbar" class="deviceWidth" src="images/main_toolbar.jpg" alt="" style="display: block; border-radius: 4px;" border="0">

                <div id="mobile_toolbar" >

                <a href="#"><div style="margin-bottom: 5px; width:100%; height:100%; color:black; background:#a4a4a4; font-weight: bold;">New Inventory</div>
                <a href="#"><div style="margin-bottom: 5px; width:100%; color:black; background:#a4a4a4; font-weight: bold;">Used Inventory</div>
                    <a href="#"><div style="margin-bottom: 5px; width:100%; color:black; background:#a4a4a4; font-weight: bold;">Services</div>
                        <a href="#"><div style="margin-bottom: 5px; width:100%; color:black; background:#a4a4a4; font-weight: bold;">Directions</div>
                            <a href="#"><div style="margin-bottom: 5px; width:100%; color:black; background:#a4a4a4; font-weight: bold;">Contact</div>
<a href="#"><img src="images/twitter.jpg"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><img src="images/facebook.jpg">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><a href="#"><img src="images/youtube.jpg"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><img src="images/google.jpg"></a>

                </div>  

Answer 1

Although that means more work for me, it is good to know.

In my case, I had "spacers" invoked as follows:

class="spacer"

So I guess now I'll use this instead :

style="display: block !important; clear: both !important;"

Answer 2

"Gmail only accepts inline stylings. No head tags, no style tags whatsoever, only inline" not true at all. Because Gmail seems to accept basic elements styles, like this :

p{
text-align:right;
margin:10px;
}

And you can put it in a style tag in the head of your mail, or use inline style too. Gmail accept border radius, and others simple styles. You can use CD DATA and html comments in the style tag like this :

<style>
<!--
<![CDATA[
p{
    text-align:right;
    border:1px solid #ccc;
    margin:10px;
    border-radius:10px;
    margin:10px;

}
]]>
-->
</style>

Answer 3

Gmail will not respect display:none. You can get around this problem by declaring display:none!important inline on the element but that's pretty worthless as well because you'll never be able to overwrite it.

In order to hide an element in an HTML email and have it work in Gmail you need to zero it out and adjust the sizing in your CSS (which Gmail will ignore).

This works on single tables or nested tables. You must write all code within without any inline declared dimensions or positioning other than float:left.. If you need to set dimensions on something, do so in the stylesheet up top which Gmail will pay no attention to. This includes dimensions on images, padding, margin, font-size, line-height, border, float, text-align, etc.. anything which references a dimension or placement.

Like so:

<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>

Additionally, the added conditional comment covers you for Outlook 07.

Answer 4

You can easily make all CSS inline with campaignmonitors inline css tool But as jsuissa said, display:none does not work on gmail, it will be shown.

Answer 5

To build on the answer offered, in addition to the inline CSS, you'll run into issues using display in Gmail mobile apps.

Adding the !important declaration also helps, but it may cause you a headache in Outlook which will ignore that rule.

You may want to try additional methods for greater compatibility along with inline CSS. The example below would hide your toolbar by default and for email clients that support media queries you'll be able to turn back on by reversing them.

<div id="full_toolbar style="width:0 !important; overflow:hidden !important; display:none !important;">

This question originally covered the same idea.

Answer 6

Gmail only accepts inline stylings. No head tags, no style tags whatsoever, only inline. That means no media queries.

This should give you the answer you need. :)

This is a great help too: http://www.campaignmonitor.com/css/