Gmail Css Styling

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 n

Solution 1:

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/

Solution 2:

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.

<divid="full_toolbarstyle="width:0!important;overflow:hidden!important;display:none!important;">

This question originally covered the same idea.

Solution 3:

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.

Solution 4:

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>@mediaonly 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><tableborder="0"cellpadding="0"cellspacing="0"><tr><!--[if !mso]><!--><tdstyle="width: 0; max-height: 0; overflow: hidden; float: left;"></td></tr><!--<![endif]--></table>

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

Solution 5:

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