CODEWITHSUNDEEP
htmlcsshtml-email
amlyhamm
amlyhamm

Reputation: 1150

Hide content in Gmail HTML email - but display in mobile?

I'm trying to build a responsive HTML email. I'm attempting to do something fairly simple but getting stuck and am starting to be convinced that I may need to approach it in a different way.

I want to show certain content if the user is on a mobile device, and hide it otherwise.

My first attempt looked like:

The CSS in the head:

@media (max-width: 420px) and (min-width: 100px) {
    .mobile {
        display:block !important;
    }
}

The HTML:

<div class='mobile' style='display:none;'>
  I'm only visible on mobile :)
</div>

This works beautifully for most mail clients but not with Gmail which does not support 'display:none' without an '!important'. But, adding the !important to the inline styles means that it will not display for mobile.

I've tried a few different things including messing with visibility/opacity (figured that would be a start in the right direction, but that didn't work at all) and trying to sneak around inline styles by attempting:

The CSS in the head:

.mobile {
    display: none !important;
}

@media (max-width: 420px) and (min-width: 100px) {
    #fix .mobile {
        display:block !important;
    }
}

The HTML:

<div id='fix'>
    <div class='mobile' style='display:none;'>
       I'm only visible on mobile :)
    </div>
</div>

But that didn't work either. Seems like it would be a pretty common problem.

Any ideas how to get around this?

Upvotes: 2

Views: 6533

Answers (2)

amlyhamm
amlyhamm

Reputation: 1150

Ah the beauty of software development: we get to just keep trying until things work! Found a fix. It seems like there is more than one way to get around Gmail's display: none (!important on the inline style is not the only way). Here's what worked for me:

The CSS in the head:

.mobile {
    display: none;
    font-size: 0;
    max-height: 0;
    line-height: 0;
    padding: 0;
}

@media (max-width: 420px) and (min-width: 100px) {
    .mobile {
        display:block !important;
        line-height: 1.5 !important;
        max-height: none !important;
    }
}

The HTML:

<div class='mobile' style='display:none;font-size: 0; max-height: 0; line-height: 0; padding: 0;'>
  I'm only visible on mobile :)
</div>

Upvotes: 4

philipb3
philipb3

Reputation: 279

How about using:

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

Upvotes: 0

Related Questions