Menu icon Foundation
Visibility Classes in Gmail (displays both)

I'm having some trouble with visibility classes in gmail on both desktop and mobile, while they look great in Apple Mail desktop and mobile.

 

Gmail seems to be ignoring the hide-for-large and show-for-large classes and displays both versions of the row on both clients.

 

It is actually working in outlook, but of course gmail is probably the next biggest target.

 Btw, I am working with the latest foundation-cli and inliner

The code:

 
<!-- Header -->
<container>
  <row>
    <columns small="12" large="12">
      <img src="email_top.png" alt="" align="center" class="text-center">
    </columns>
  </row>

<!-- Articles -->

  <row class="show-for-large large-intro">
    <columns large="12">
      <img src="main_example.png" alt="" align="center" class="text-center">
      <p class="topic">INSIGHTS</p>
      <p class="article-title-main">Marketing munchies</p>
      <p class="article-body"><strong>Lorem ipsum adipisicing elit.</strong> Suscipit totam</p>

      <div class="article-button-left" style="margin-left: 1em;">
        <div class="text-button">READ MORE</div> <div class="arrow-right"></div>
      </div>

    </columns>
  </row>
  <row class="hide-for-large">
    <columns small="12">
      <div style="margin-left: 1em; margin-right: 1em;">
        <div class="cropped"></div>
        <p class="topic">INSIGHTS</p>
        <p class="article-title-main">Marketing to mommy</p>
        <p class="article-body"><strong>Lorem ipsum dolor elit.</strong> Suscipit totam quasi</p>

        <div class="article-button-left">
          <div class="text-button">READ MORE</div> <div class="arrow-right"></div>
        </div>

      </div>
    </columns>
  </row>
</container>

 

Responsivevisibility classesgmail

I'm having some trouble with visibility classes in gmail on both desktop and mobile, while they look great in Apple Mail desktop and mobile.

 

Gmail seems to be ignoring the hide-for-large and show-for-large classes and displays both versions of the row on both clients.

 

It is actually working in outlook, but of course gmail is probably the next biggest target.

 Btw, I am working with the latest foundation-cli and inliner

The code:

 
<!-- Header -->
<container>
  <row>
    <columns small="12" large="12">
      <img src="email_top.png" alt="" align="center" class="text-center">
    </columns>
  </row>

<!-- Articles -->

  <row class="show-for-large large-intro">
    <columns large="12">
      <img src="main_example.png" alt="" align="center" class="text-center">
      <p class="topic">INSIGHTS</p>
      <p class="article-title-main">Marketing munchies</p>
      <p class="article-body"><strong>Lorem ipsum adipisicing elit.</strong> Suscipit totam</p>

      <div class="article-button-left" style="margin-left: 1em;">
        <div class="text-button">READ MORE</div> <div class="arrow-right"></div>
      </div>

    </columns>
  </row>
  <row class="hide-for-large">
    <columns small="12">
      <div style="margin-left: 1em; margin-right: 1em;">
        <div class="cropped"></div>
        <p class="topic">INSIGHTS</p>
        <p class="article-title-main">Marketing to mommy</p>
        <p class="article-body"><strong>Lorem ipsum dolor elit.</strong> Suscipit totam quasi</p>

        <div class="article-button-left">
          <div class="text-button">READ MORE</div> <div class="arrow-right"></div>
        </div>

      </div>
    </columns>
  </row>
</container>

 

Corey Schaaf over 3 years ago

Hey Justin, 

The thing to remember with Foundation for emails is that it's a Desktop first mentality instead of a mobile first mentality. That took me a moment to understand because it's completely backwards of what I've know with Foundation for Sites. 

I'm using the show-for-large (meaning it shows on Large devices only) and the hide-for-large (which means it shows for small devices only) successfully in several of my emails sends. 

One thing I'm curious about in your code above is this line: 

 <row class="show-for-large large-intro">

What does the class "large-intro" do? Everything looks correct in your markup, but your inlined code is what would be beneficial in solving the problem. 

Justin Triplett over 3 years ago

Hi Corey, thanks for reading my post, that's interesting that Foundation for emails is Desktop First.

Of course it makes sense to see all the inlined css. I'll paste that in here, hopefully it is still readable!

This is only for the two rows in question, i left out the small header area that I included in the example above. I've also made some other slight (likely unrelated) changes in the meantime but am otherwise still seeing both rows.

Specifically the css class you pointed out is just this:

 

.large-intro {
  margin-top:.6em;
}
<table class="row show-for-large large-intro" style="border-collapse: collapse; border-spacing: 0; display: table; margin-top: .6em; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
  <tbody>
    <tr style="padding: 0; text-align: left; vertical-align: top;">
      <th class="small-12 large-12 columns first last" style="Margin: 0 auto; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0 auto; padding: 0; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; text-align: left; width: 619px;">
        <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
          <tbody>
            <tr style="padding: 0; text-align: left; vertical-align: top;">
              <th style="Margin: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left;">
                <img src="http://werkbench.com/trip/assets/img/main_example.png" alt="" align="center" class="text-center" style="-ms-interpolation-mode: bicubic; Margin: 0 auto; border: none; clear: both; display: block; float: none; margin: 0 auto; max-width: 100%; outline: none; text-align: center; text-decoration: none; width: auto;">
                <p class="topic" style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; Margin: 0; Margin-bottom: 10px; color: #fdca56; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 600; hyphens: none; line-height: 19px; margin: 0 auto; margin-bottom: 10px; max-width: 600px; padding: 0; padding-bottom: .6em; padding-top: 2.4em; text-align: left;">INSIGHTS</p>
                <p class="article-title-main" style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; Margin: 0; Margin-bottom: 10px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 600; hyphens: none; line-height: 42px; margin: 0 auto; margin-bottom: 10px; max-width: 600px; padding: 0; padding-bottom: .6em; text-align: left;">Marketing munchies</p>
                <p class="article-body" style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; Margin: 0; Margin-bottom: 10px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: none; line-height: 20px; margin: 0 auto; margin-bottom: 10px; max-width: 600px; padding: 0; padding-bottom: 15px; text-align: left;"><strong style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; margin: 0 auto; max-width: 600px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong> Suscipit totam quasi
                    ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>

                <div class="article-button-left" style="float: left;">
                  <a href="#" style="Margin: 0; color: black; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">
                    <div class="text-button" style="float: left; font-size: 0.8em; padding-right: 0.6em;">KEEP READING</div>
                    <div class="entity-arrow-right" style="float: left; margin-top: -2px;">►</div>
                  </a>
                </div>

              </th>
              <th class="expander" style="Margin: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;"></th>
            </tr>
          </tbody>
        </table>
      </th>
    </tr>
  </tbody>
</table>
<table class="row hide-for-large" style="border-collapse: collapse; border-spacing: 0; display: none; font-size: 0; line-height: 0; max-height: 0px; mso-hide: all; overflow: hidden; padding: 0; position: relative; text-align: left; vertical-align: top; width: 0px;">
  <tbody style="mso-hide: all;">
    <tr style="mso-hide: all; padding: 0; text-align: left; vertical-align: top;">
      <th class="small-12 large-12 columns first last" style="Margin: 0 auto; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0 auto; mso-hide: all; padding: 0; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; text-align: left; width: 619px;">
        <table style="border-collapse: collapse; border-spacing: 0; mso-hide: all; padding: 0; text-align: left; vertical-align: top; width: 100%;">
          <tbody>
            <tr style="mso-hide: all; padding: 0; text-align: left; vertical-align: top;">
              <th style="Margin: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0; mso-hide: all; padding: 0; text-align: left;">
                <div style="mso-hide: all;">
                  <div class="cropped" style="background-image: url(main_example.png); background-position: center; background-repeat: no-repeat; height: 150px; mso-hide: all; overflow: hidden; width: 375px;"></div>
                  <p class="topic" style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; Margin: 0; Margin-bottom: 10px; color: #fdca56; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 600; hyphens: none; line-height: 19px; margin: 0 auto; margin-bottom: 10px; max-width: 600px; mso-hide: all; padding: 0; padding-bottom: .6em; padding-top: 2.4em; text-align: left;">INSIGHTS</p>
                  <p class="article-title-main" style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; Margin: 0; Margin-bottom: 10px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 600; hyphens: none; line-height: 42px; margin: 0 auto; margin-bottom: 10px; max-width: 600px; mso-hide: all; padding: 0; padding-bottom: .6em; text-align: left;">Marketing to mommy</p>
                  <p class="article-body" style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; Margin: 0; Margin-bottom: 10px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: none; line-height: 20px; margin: 0 auto; margin-bottom: 10px; max-width: 600px; mso-hide: all; padding: 0; padding-bottom: 15px; text-align: left;"><strong style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; margin: 0 auto; max-width: 600px; mso-hide: all;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong> Suscipit
                      totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>

                  <div class="article-button-left" style="float: left; mso-hide: all;">
                    <a href="#" style="Margin: 0; color: black; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; mso-hide: all; padding: 0; text-align: left; text-decoration: none;">
                      <div class="text-button" style="float: left; font-size: 0.8em; mso-hide: all; padding-right: 0.6em;">KEEP READING</div>
                      <div class="entity-arrow-right" style="float: left; margin-top: -2px; mso-hide: all;">►</div>
                    </a>
                  </div>

                </div>
              </th>
              <th class="expander" style="Margin: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0; mso-hide: all; padding: 0 !important; text-align: left; visibility: hidden; width: 0;"></th>
            </tr>
          </tbody>
        </table>
      </th>
    </tr>
  </tbody>
</table>

Corey Schaaf over 3 years ago

Just a quick note about using "em" vs px.  I would stay away from Em. There's a great article about why here:
https://www.campaignmonitor.com/blog/email-marketing/2011/04/should-i-use-em-or-px-when-coding-for-html-email/

Okay, after looking at my own example the reason I don't have this issue in gmail is because I'm using show for large and my intent is that it would show for large devices only. However this is a media query and since email is Desktop first, and gmail ignore media queries, it's going to "show-for-large" regardless which means it's also going to show on desktop.  

With "hide-for-large" this invokes a media query again ... and gmail doesn't support media queries which means it's going to show both.  

If you look at the bottom page of the docs for visibility classes, you'll see that they note hide-for-large isn't supported in gmail or yahoo. 

http://foundation.zurb.com/emails/docs/visibility.html

Justin Triplett over 3 years ago

 Ah yes, I can't believe I missed that note at the bottom of the page. That makes perfect sense.

Thanks for being so helpful!

On a related note, the only real reason I'm using this hide-for-large here is because for the desktop version I am using a full size image and for the mobile size I am using div.cropped with a background image centered and height and width set -because the designers thought it would be best to use the same image. Do you have any tips on how to do something similar that won't rely on media queries?

Re: Em units, thanks for the article, I'm usually in the habit of working on sites and I like em but yeah a friend recently recommended me to stick to px for email... while I was in the middle of this project. I suppose I'll probably find some time to clean that up. 

Corey Schaaf over 3 years ago

I'm not sure what the best approach would be to do that.  Responsive is a progressive enhancement but because of gmails lack of support for media queries, it makes doing what you're suggesting difficult in foundation's framework. That doesn't mean it isn't impossible. 

I've seen other companies create two versions of the email but this is more work and more headache. You could try this approach below. Two variations of the email exist in two different TDs. Just be sure to set one as diplay:block and the other to display:none manually. Then use a class and media query to turn one version of the email on / off if media queries are understood by the client. In the event that media queries aren't understood, only one version would show instead of both. 

<style>
@media screen and (max-width: 596px) {
.small{
  display:block!important;
}
.large{
  display:none!important;
 }
}
</style>


<table>
<tr>
<td class="small" style="display:none;">
I will not show on gmail because the default style is set to display:none; A media query won't turn this to display block because gmail doesn't understand media queries.
</td>
<td class="large" style="display:block;">
I will always show on gmail because even after my style is inlined, I don't understand media queries so the media query that would set this to display:none isn't understood. 
</td>
</tr>
</table>

Rafi Benkual over 3 years ago

For an image to crop, I would typically use a background image and set the background-size property to cover.

According to this CSS chart https://www.campaignmonitor.com/css/ that would work on iPhones and maybe Androids but there is a note there that image won't stretch. Haven't tried it myself. Background-position does work though so you can shift it around.

Another option is position: absolute; which does work on iOS and Android. 

All this would need to be done in the small media query. 

Curious to see what you try and how it goes!

Justin Triplett over 3 years ago

Hey Corey, thanks for the info but I have not had any luck with the solution you suggested. It makes sense to me, make a block tag display: none but then give it a class to so a media query can make is display: block.

I have tried this but I am still able to see the block that I have given display: none, which I'm finding very surprising. 

Even when I am just wrapping my content in a <div style="display:none;"> and doing nothing else gmail is still displaying anything within that div. This is blowing my mind, very frustrating.

Will gmail only use display: none on a td? I'm using inky and that doesn't seem to generate any td's that would be good to use. Any suggestion on a tag I can put that on in inky and have it display none in gmail. I can edit the output to wrap everything in another table but that is a little scary and I know the client would prefer to not have two whole different versions of the email in the same file they would have to edit to change pictures/text etc.

Really all I am looking to do at this point is hide a block in gmail, you would think this wouldn't be so hard! :)

edit 1:

Well I did finally realize that `"display: none !important"` will work in gmail but then the media query can't override that. So I think I have to look at alternative ways of hiding content from gmail, which I believe to be completely insane.

edit 2:

I found a work around where you can change the height and width and set overflow: hidden, however gmail doesn't support the height tag so then you end up with a big black block where your content would be. I'm working on specifying the smallest piece of content to minimize this space. "Interestingly" enough just trying to hide my div that has a background image is not working well because the content below it will not respect its size when surrounded by a hide-for-large. WOW that is some crazy side effect stuff there. 

Corey Schaaf over 3 years ago

I would take the progressive enhancement approach and build the mobile version first. You can always go into the compiled code and add your own "display:none" on the TD/TH that has the desktop version.  That TD would also have a class show-for-large (which if the email client understood what media queries are, would show that version). 

At the same time, you would just have a display:block on the other TD which you would manually add yourself. This way the display:block and display:none would need a media query to override them. This keeps from both versions of the email showing potentially. You would still have the class "hide-for-large" on the second TD.  

It's a bit more tedious creating two versions of the email, but you could still use the foundation framework with this approach.