Email Template CSS Problems in Gmail Client

Other Questions Gmail
1

Hey everyone! I’m struggling with some CSS formatting issues when my HTML email gets displayed in Gmail. The email looks perfect on mobile devices like iPhone, but Gmail keeps showing both the desktop navigation and mobile navigation elements at the same time. I really need to hide the mobile navigation bar so the email renders properly in Gmail’s desktop version.

I’ve already attempted to use display:none !important but it’s not doing the trick.

Any suggestions would be appreciated!

CSS Code:

<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;}
    #desktop_nav {display:none !important;}
    #mobile_nav {display:block; background:white;}
    #mobile_nav 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_nav] {
        display:none!important;
        overflow:hidden!important;
    }
}
</style>

HTML Structure:

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

<div id="mobile_nav">
    <a href="#"><div style="margin-bottom: 5px; width:100%; height:100%; color:black; background:#b5b5b5; font-weight: bold;">Latest Models</div></a>
    <a href="#"><div style="margin-bottom: 5px; width:100%; color:black; background:#b5b5b5; font-weight: bold;">Pre-Owned Cars</div></a>
    <a href="#"><div style="margin-bottom: 5px; width:100%; color:black; background:#b5b5b5; font-weight: bold;">Maintenance</div></a>
    <a href="#"><div style="margin-bottom: 5px; width:100%; color:black; background:#b5b5b5; font-weight: bold;">Location</div></a>
    <a href="#"><div style="margin-bottom: 5px; width:100%; color:black; background:#b5b5b5; font-weight: bold;">Get in Touch</div></a>
    <a href="#"><img src="images/twitter_icon.jpg"></a>&nbsp;&nbsp;&nbsp;
    <a href="#"><img src="images/facebook_icon.jpg"></a>&nbsp;&nbsp;&nbsp;
    <a href="#"><img src="images/youtube_icon.jpg"></a>&nbsp;&nbsp;&nbsp;
    <a href="#"><img src="images/google_icon.jpg"></a>
</div>
2

Gmail either strips out media queries or just ignores them. I switched to a table-based approach with conditional comments and it worked. Instead of CSS media queries, I wrapped the mobile nav like this: <!--[if !mso]><!--><div id="mobile_nav" style="display:none;"><!--<![endif]-->. This hides it from Outlook while keeping it hidden by default. I also added a separate <style> block just for Gmail’s rendering engine. BTW, you’re missing the yahoo attribute in your body tag - the body[yahoo] selector won’t work without it.

3

Hit this exact problem last month. Gmail’s webmail strips out most @media queries, so your responsive CSS just won’t work. I had to completely restructure my approach - instead of media queries, I set the default state to hide mobile nav with inline styles: <div id="mobile_nav" style="display:none; max-height:0; overflow:hidden;">. Then I added font-size:0; line-height:0; as backup hiding methods since Gmail supports those properties. The trick is Gmail’s desktop client doesn’t recognize viewport-based media queries at all. You’ve got to assume desktop as default and only show mobile elements when the client explicitly supports mobile rendering.

4

gmail’s css support is pretty bad, i’ve had the same issues. try using inline styles for your mobile nav instead of media queries. also, for hiding it, use mso-hide:all; like this: <div id="mobile_nav" style="mso-hide:all; display:none;">. should help!