Foundation-emails: Both .hide-for-large and .show-for-large content show in some email clients. Should be either/or.
How can we reproduce this bug?
See this test, specifically the Gmail clients
https://litmus.com/checklist/emails/public/b396ece
and full html
https://litmus.com/builder/3208f91
New Litmus links, the old ones seem to have expired.
Code: https://litmus.com/builder/3208f91
Tests: https://litmus.com/checklist/emails/public/b396ece
Write out the HTML (or Inky code) that causes the issue.
<table class="container text-center">
<tbody>
<tr>
<td>
<table class="row hide-for-large">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
<table>
<tr>
<th> <br>
<center data-parsed=""> <img src="http://placehold.it/200x50" align="center" class="text-center"> </center> <br>
<h1>Hi, Susan Calvin HIDE FOR LARGE (SHOW ON SMALL ONLY)</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, iste, amet consequatur a veniam.</p>
<table>
<tr>
<th class="callout primary">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellendus natus, sint ea optio dignissimos asperiores inventore a molestiae dolorum placeat repellat excepturi mollitia ducimus unde doloremque
ad, alias eos!</p>
</th>
</tr>
</table>
</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<table class="row show-for-large">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
<table>
<tr>
<th> <br>
<center data-parsed=""> <img src="http://placehold.it/200x50" align="center" class="text-center"> </center> <br>
<h1>Hi, Susan Calvin SHOW FOR LARGE (HIDE ON SMALL)</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, iste, amet consequatur a veniam.</p>
<table>
<tr>
<th class="callout primary">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellendus natus, sint ea optio dignissimos asperiores inventore a molestiae dolorum placeat repellat excepturi mollitia ducimus unde doloremque
ad, alias eos!</p>
</th>
</tr>
</table>
</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
What did you expect to happen?
.show-for-large content would only be visible on large screens and .hide-for-large content would only be visible on small screens
What happened instead?
Gmail shows both, rendering this feature useless
What email clients does this happen in?
Gmail
andreimoment
All 4 comments
I'm seeing this problem in Yahoo Mail on Litmus.
Images that are supposed to be only visible on mobile are shown at large size.
tazcarper
on 25 Mar 2016
This one is a real bummer and a show-stopper for doing responsive emails that require different layouts. If anyone has links to a workaround or know how to prevent duplicate content from rendering I'd be all ears.
Fprince333
on 6 Jun 2016
Updated tests with simplified code.
IMO hiding content does not work properly on a satisfactory set of email clients and it may be a good idea to remove it from the framework or add a clear warning.
New Litmus links, the old ones seem to have expired.
Code: https://litmus.com/builder/3208f91
Tests: https://litmus.com/checklist/emails/public/b396ece
Simplified code:
<body>
<!-- <style> -->
<table class="body" data-made-with-foundation="">
<tr>
<td class="center" align="center" valign="top">
<center data-parsed="">
<div class="header text-center" align="center">
<table class="container">
<tbody>
<tr>
<td>
<table class="row collapse">
<tbody>
<tr>
<th class="small-6 large-6 columns first">
<table>
<tr>
<th> <img src="http://placehold.it/150x30/663399"> </th>
</tr>
</table>
</th>
<th class="small-6 large-6 columns last">
<table>
<tr>
<th>
<p class="text-right">BASIC</p>
</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<table class="container text-center">
<tbody>
<tr>
<td>
<table class="row hide-for-large">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
<table>
<tr>
<th> <br>
<center data-parsed=""> <img src="http://placehold.it/200x50" align="center" class="text-center"> </center> <br>
<h1>HIDE FOR LARGE (SHOW ON SMALL ONLY)</h1>
<p class="lead">this text should be visible on small screens. Should NOT be visible on large screens</p>
</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<table class="row show-for-large">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
<table>
<tr>
<th> <br>
<center data-parsed=""> <img src="http://placehold.it/200x50" align="center" class="text-center"> </center> <br>
<h1>SHOW FOR LARGE (HIDE ON SMALL)</h1>
<p class="lead">This text should be visible on large screens. Should NOT be visible on small screens.</p>
</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</table>
</body>
Since in the documentation it is written:
note - .hide-for-large is not supported on Gmail and Yahoo email clients.
Due to Outlook's lack of support for certain CSS properties, the Foundation for Emails visibility classes should be used in conjunction with conditional comments to ensure that the content is properly hidden (or shown) in Outlook 2007, 2010 and 2013.
I think for Outlook specifically you can use as a workaround:
<!--[if !mso]><!-->
<div class="hide-for-large">
<callout class="primary">
<p>This callout will only appear on small screens.</p>
</callout>
</div>
<!--<![endif]-->
<callout class="show-for-large alert">
<p>This callout will only appear on large screens.</p>
</callout>
For other emailing clients I have no solution if there are no conditionnal comments.
lbineau
on 20 Feb 2017
Related issues
LyLuX
路
5Comments
iampstew
路
5Comments
seansmyth
路
5Comments
rockse
路
3Comments
jasonmarkle
路
4Comments
Most helpful comment
Since in the documentation it is written:
I think for Outlook specifically you can use as a workaround:
For other emailing clients I have no solution if there are no conditionnal comments.