Menu icon Foundation
Foundation email - Visibility Classes

Hello everyone,
I test the email creation with "foundation email".
I have a problem with the "Visibility Classes" is not working properly.

The display of the class "hide-for-large" (for display on mobile) remains hidden in mobile version? I have yet used the code section mentioned on this page "http://foundation.zurb.com/emails/docs/visibility.html"
Note: The display of class work when testing a browser, but not when I received an email. I tested with Gmail and other personal Gmail email (free.fr)

Would you tell me why the class does not?
thank you

<table class="callout">
  <tr>
    <th class="callout-inner hide-for-large primary">
      <p>This callout will only appear on small screens.</p>
    </th>
    <th class="expander"></th>
  </tr>
</table>

<table class="callout">
  <tr>
    <th class="callout-inner show-for-large alert">
      <p>This callout will only appear on large screens.</p>
    </th>
    <th class="expander"></th>
  </tr>
</table>

 

foundation emailvisibility class

Hello everyone,
I test the email creation with "foundation email".
I have a problem with the "Visibility Classes" is not working properly.

The display of the class "hide-for-large" (for display on mobile) remains hidden in mobile version? I have yet used the code section mentioned on this page "http://foundation.zurb.com/emails/docs/visibility.html"
Note: The display of class work when testing a browser, but not when I received an email. I tested with Gmail and other personal Gmail email (free.fr)

Would you tell me why the class does not?
thank you

<table class="callout">
  <tr>
    <th class="callout-inner hide-for-large primary">
      <p>This callout will only appear on small screens.</p>
    </th>
    <th class="expander"></th>
  </tr>
</table>

<table class="callout">
  <tr>
    <th class="callout-inner show-for-large alert">
      <p>This callout will only appear on large screens.</p>
    </th>
    <th class="expander"></th>
  </tr>
</table>

 

Gavin Lawrie about 3 years ago

Good to hear you are having a go with Foundations for Emails.  Hope it goes well for you.

The behaviour you noticed with visibility classes in Gmail (and some other web based email systems) is noted in the documentation - specifically this comment at foot of the page on Visibility Classes:

note - .hide-for-large is not supported on Gmail and Yahoo email clients.

Hope this clarifies things for you.

The online documentation for Foundation for Emails is pretty good - and well worth consulting if you are going to be developing things using the system.

Barry Hanbury about 3 years ago

Hey dude!

 

I have found a fix for this!

<table class="callout">
<div class="hide-for-large">
  <tr>
    <th class="callout-inner hide-for-large primary">
      <p>This callout will only appear on small screens.</p>
    </th>
    <th class="expander"></th>
  </tr>  
</div>
</table>

<table class="callout">
<div class="show-for-large">
  <tr>
    <th class="callout-inner show-for-large alert">
      <p>This callout will only appear on large screens.</p>
    </th>
    <th class="expander"></th>
  </tr>  
</div>
</table>

Hope this helps buddy! just wrap the parent around a div! with the class of hide or show!

pixelup about 3 years ago

Great !
I'll test it quickly
thank you

Morten Sassi about 3 years ago

Hey Barry,

 

tried your code but it's even not working in the browser.

 

i ran npm build but it seems the inline-code for "display:none" doesn't get overwritten since it has !important

Corey Schaaf about 3 years ago

There isn't a fix for this currently. However, gmail has announced that it will start supporting media queries this month. 

https://gsuite-developers.googleblog.com/2016/09/your-emails-optimized-for-every-screen-with-responsive-design.html

 

Bryan about 3 years ago

I saw that issue, in the documentation, with Gmail and Yahoo. But I'm having this problem even in iOS.

Rafi Benkual about 3 years ago


It looks like we pushed a fix a few days ago. Check it out here: cf7d15a

Bryan about 3 years ago

Thanks, Rafi!

Now, at the risk of sounding like a complete idiot … how would I update F4E? This appears not to be something pushed through NPM but, rather, a revised SCSS file. Is it just a matter of manually updating _visibility.scss in each project, or is it something that can be updated once for all?

Bryan about 3 years ago

Or, having just proved myself to be a complete idiot, will the next project I generate from the command line include this update?

:)

Morten Sassi about 3 years ago

Hey Bryan you don't have to update anything, Rafi just showed you how to correctly markup your elements if you want to add visibility functionalities to your content

Bryan about 3 years ago

Thanks, Moe!

Bryan about 3 years ago

Sorry to keep scratching here, but this one still itches.

The fix Rafi mentioned above was very helpful: between that and Google's welcome changes to Gmail, the visibility classes work in Yahoo Mail (desktop), Outhouse (2007/10/13), and Gmail (desktop). I made sure to wrap the element I wanted to show/hide in a <div> and applied the visibility class(es) to that <div>.

The only difficulty I'm experiencing is with iOS — on iPhones (I test for 5s and 6s in Litmus). Neither the show-for-large nor the hide-for-large elements appear for these two phones. Both are hidden. The visibility classes work just fine for iPads (retina & mini).

Is this some sort of viewport issue? Am I the only one experiencing this?

FYI: I ran this test on a clean email. The only thing I modified (and modified very little) was the default index.html page:

  <row>
    <columns>
      <div class="show-for-large">
        <menu>
          <item href="#">This</item>
          <item href="#">is</item>
          <item href="#">for</item>
          <item href="#">DESKTOP</item>
        </menu>
      </div>
    </columns>
  </row>

  <row>
    <columns>
      <div class="hide-for-large">
        <menu>
          <item href="#">This</item>
          <item href="#">is</item>
          <item href="#">for</item>
          <item href="#">MOBILE</item>
        </menu>
      </div>
    </columns>
  </row>

Yup. Tried to keep it super-simple.

Hope that's helpful. Thanks in advance for any help anyone can provide!

_bryan

 

Rafi Benkual about 3 years ago

For fixes pushed to the develop branch on Foundation, you can update before the next release goes out. If it's a small change you can go to the files in the commit I linked and change them, save, restart the server.

Another way to get all the changes, you can go to the gulpfile and change the version:

From

"dependencies": {
    "foundation-emails": "^2.2.1"
  },

to

"dependencies": {
    "foundation-emails": "zurb/foundation-emails#develop"
  },

Changes in develop are tested but have not gone through full QA. Let us know how it goes!

Bryan about 3 years ago

Once again, thank you very much, Rafi.

I assumed, incorrectly, that I'd get the code update when I generated the new email project.

I was able to locate that dependency line, not in the gulpfile, but in package.json, and I modified it there, per your instructions. That didn't seem to work — the _visibility.scss file didn't update after restarting the server. Pretty sure I did something wrong. Running npm update --save, however, did update the visibility stylesheet … but I ended up with a lot of additional node modules.

But manually editing _visibility.scss worked like a charm! Like you said, this was a teensy little edit, so if you know what I did wrong, editing package.json or failing to edit the gulpfile, I'd love to know what. Otherwise, I'll remember to edit the visibility stylesheet for future emails, until the next version of F4E is released.

Have a great weekend!

_bryan