Menu icon Foundation
A fix for hiding/showing content depending on small or large devices

Foundation's framework is built on media queries. the classes .show-for-large an .hide-for-large don't work in browsers that don't support media queries. (.hide-for-large seems to be the problem).

I've found a work around  where you can accomplish hiding and showing content with foundation's framework with just a few extra tags. While you should always have a mobile first mentality when designing, FFE is built with a desktop first approach for coding. Showing and Hiding content is pretty easy (without trying to use the hide for large class). You just have to change your code approach to mobile first

Companies like Under Armour, Nike have a hybrid email.  Meaning while there emails look responsive they actually have two versions of the email based on break points and some clever class overrides. This means you would need to design two versions of your email, with different sets of images. I know this is the approach the two companies I listed above do because you can look at the code and see two different versions being shown based on a media query. 

Here is a link to an under armour email. You'll see the breakpoints changing. The images may look the same, but if you open two windows , you'll see different images are used based on the media query. 

Under Armour Example
http://view.e.underarmour.com/?qs=fef3efded2978c8aa16b370c21f0c37e7e4c27dc51751bb7bf2e902ecd2bf6ccf6c8857bd5004e84132b2e10eb04bc5a34b4c546c797432052793989865cc36bfe4a82949c64c67a54fa7ce903c68491

What does this mean? 
Even in the example above, Gmail for mobile/app still shows the desktop version of the email. There's no way around this (even though they went to the trouble of creating a mobile version! How frustrating!

I've come to the conclusion you either:

  • design for desktop with a mobile fallback for browsers who support media queries
  • design for mobile with a desktop fallback for browsers who support media queries 

In my example below, I'm going to show you how you can design for mobile first and hide desktop content. Keeping in mind, the fallback version is the mobile version. (Gmail will see the mobile version) 

In my Inky Markup, I've included some divs inside a column. I've also included a tag <!--[if !mso]--><!--> with and end tag <!--<![endif]-->. Everything inside these tags will be hidden on large. (disclaimer: if the client understand media queries) I manually added ... 

 

 font-size:0;max-height:0;line-height:0;overflow:hidden;mso-hide:all;display:none;

... to a div. This is how I set desktop content that I want to hide by default (disclaimer: if the client understands media queries). 

 

<container>
    <row>
        <columns>
            <!-- Desktop -->
            <!--[if !mso]><!-->
            <div style="font-size:0;max-height:0;line-height:0;overflow:hidden;mso-hide:all;display:none;" class="trigger-desktop" >
                <p>Desktop</p>
                <img src="http://placehold.it/580x580?text=Desktop" width="580" height="580">
            </div>
            <!--<![endif]-->
            
            <!-- Mobile -->
            <div style="display:block;" class="trigger-mobile" >
                <p>Mobile</p>
                <img src="http://placehold.it/580x580?text=Mobile">
            </div>
        </columns>
    </row>
</container>

Additions to my app.scss file 

 

@import 'settings';
@import 'foundation-emails';

// toggle desktop off and mobile on with max-width media query
@media only screen and (max-width: #{$global-breakpoint}) {
    .trigger-desktop{
        display:none!important;
        font-size:0!important; /*removing anything that can cause spacing or height*/
        max-height:0!important; /*removing anything that can cause spacing or height*/
        line-height:0!important; /*removing anything that can cause spacing or height*/
        mso-hide: all!important; /*turning content off for outlook*/
    }
    .trigger-mobile{
        display:block!important;
        font-size: 12px!important; /*set to whatever is appropriate when turned on*/
        max-height: none!important; /*set to whatever is appropriate when turned on*/
        line-height: 1.5!important; /*set to whatever is appropriate when turned on*/
        mso-hide: none!important;  /*resetting to on for outlook*/
    }
} 

// toggle desktop on and mobile off MINIMUM WIDTH media query
@media only screen and (min-width: #{$global-breakpoint}) {
    .trigger-desktop{
        display:block!important;
        font-size:12px!important; 
        max-height:none!important; 
        line-height:1.5!important; 
        overflow:auto;
        mso-hide:none!important; 

    }
    .trigger-mobile{
        display:none!important;
        font-size: 0!important;
        max-height: 0!important;
        line-height: 0!important;
        mso-hide: all!important; 
    }
}   


What have I gained? 
It's important to note that 54% of opens (as of this writing) happen on mobile devices. The previous approach did not guarantee that the majority of people on mobile devices actually saw the mobile version. This approach means that the the majority of aps and webmail that view the device on mobile clients will in fact see the mobile version.  However the opposite is true for desktop now (mainly for gmail). Gmail users on desktop will also be shown the mobile version. 

Is this a bad thing? Not necessarily, just depends on preference. 

foundation for emails.hide-for-large.show-for-large

Foundation's framework is built on media queries. the classes .show-for-large an .hide-for-large don't work in browsers that don't support media queries. (.hide-for-large seems to be the problem).

I've found a work around  where you can accomplish hiding and showing content with foundation's framework with just a few extra tags. While you should always have a mobile first mentality when designing, FFE is built with a desktop first approach for coding. Showing and Hiding content is pretty easy (without trying to use the hide for large class). You just have to change your code approach to mobile first

Companies like Under Armour, Nike have a hybrid email.  Meaning while there emails look responsive they actually have two versions of the email based on break points and some clever class overrides. This means you would need to design two versions of your email, with different sets of images. I know this is the approach the two companies I listed above do because you can look at the code and see two different versions being shown based on a media query. 

Here is a link to an under armour email. You'll see the breakpoints changing. The images may look the same, but if you open two windows , you'll see different images are used based on the media query. 

Under Armour Example
http://view.e.underarmour.com/?qs=fef3efded2978c8aa16b370c21f0c37e7e4c27dc51751bb7bf2e902ecd2bf6ccf6c8857bd5004e84132b2e10eb04bc5a34b4c546c797432052793989865cc36bfe4a82949c64c67a54fa7ce903c68491

What does this mean? 
Even in the example above, Gmail for mobile/app still shows the desktop version of the email. There's no way around this (even though they went to the trouble of creating a mobile version! How frustrating!

I've come to the conclusion you either:

  • design for desktop with a mobile fallback for browsers who support media queries
  • design for mobile with a desktop fallback for browsers who support media queries 

In my example below, I'm going to show you how you can design for mobile first and hide desktop content. Keeping in mind, the fallback version is the mobile version. (Gmail will see the mobile version) 

In my Inky Markup, I've included some divs inside a column. I've also included a tag <!--[if !mso]--><!--> with and end tag <!--<![endif]-->. Everything inside these tags will be hidden on large. (disclaimer: if the client understand media queries) I manually added ... 

 

 font-size:0;max-height:0;line-height:0;overflow:hidden;mso-hide:all;display:none;

... to a div. This is how I set desktop content that I want to hide by default (disclaimer: if the client understands media queries). 

 

<container>
    <row>
        <columns>
            <!-- Desktop -->
            <!--[if !mso]><!-->
            <div style="font-size:0;max-height:0;line-height:0;overflow:hidden;mso-hide:all;display:none;" class="trigger-desktop" >
                <p>Desktop</p>
                <img src="http://placehold.it/580x580?text=Desktop" width="580" height="580">
            </div>
            <!--<![endif]-->
            
            <!-- Mobile -->
            <div style="display:block;" class="trigger-mobile" >
                <p>Mobile</p>
                <img src="http://placehold.it/580x580?text=Mobile">
            </div>
        </columns>
    </row>
</container>

Additions to my app.scss file 

 

@import 'settings';
@import 'foundation-emails';

// toggle desktop off and mobile on with max-width media query
@media only screen and (max-width: #{$global-breakpoint}) {
    .trigger-desktop{
        display:none!important;
        font-size:0!important; /*removing anything that can cause spacing or height*/
        max-height:0!important; /*removing anything that can cause spacing or height*/
        line-height:0!important; /*removing anything that can cause spacing or height*/
        mso-hide: all!important; /*turning content off for outlook*/
    }
    .trigger-mobile{
        display:block!important;
        font-size: 12px!important; /*set to whatever is appropriate when turned on*/
        max-height: none!important; /*set to whatever is appropriate when turned on*/
        line-height: 1.5!important; /*set to whatever is appropriate when turned on*/
        mso-hide: none!important;  /*resetting to on for outlook*/
    }
} 

// toggle desktop on and mobile off MINIMUM WIDTH media query
@media only screen and (min-width: #{$global-breakpoint}) {
    .trigger-desktop{
        display:block!important;
        font-size:12px!important; 
        max-height:none!important; 
        line-height:1.5!important; 
        overflow:auto;
        mso-hide:none!important; 

    }
    .trigger-mobile{
        display:none!important;
        font-size: 0!important;
        max-height: 0!important;
        line-height: 0!important;
        mso-hide: all!important; 
    }
}   


What have I gained? 
It's important to note that 54% of opens (as of this writing) happen on mobile devices. The previous approach did not guarantee that the majority of people on mobile devices actually saw the mobile version. This approach means that the the majority of aps and webmail that view the device on mobile clients will in fact see the mobile version.  However the opposite is true for desktop now (mainly for gmail). Gmail users on desktop will also be shown the mobile version. 

Is this a bad thing? Not necessarily, just depends on preference. 

Ibrahim Ezzy about 3 years ago

Oh? So it doesn't hide mobile version on the desktop?

Corey Schaaf about 3 years ago

Ibrahim, it does, but as I stated in the article, only if the client supports media queries. 

The approach you have to take is:

  • design for desktop with a mobile fallback for browsers who support media queries
  • design for mobile with a desktop fallback for browsers who support media queries 

So either the majority of your mobile clients will see a desktop version with option number 1 with a fall back to mobile for clients that support media queries (which is foundation out of the box)

Or tweaks to the code base where you design for mobile first (meaning almost all phone devices will see the mobile version) while mainly gmail/outlook.com users would see the desktop version. 

There is no in between on this using Foundation's Framework. 

JB Meneroud over 2 years ago

Hi there,

sorry for digging up an old threat.

Using foundation for email stack, I need to make sure a row is hidden for large screen while another one is displayed on mobile (and vice versa). Since we are talking about an email, there is absolutely no way for me to know wether or not the client will open the email on his mobile phone or desktop.

 

I tested the following (created, minified, inlined using foundation tools and set via campaign monitor and mailchimp):

<row class="hide-for-large">
    <columns small="12" large="6">
      <h2>test</h2>
      <p>Lorem ipsum dolor sit amet</p>
    </columns>
    <columns small="12" large="6"><img src="http://placehold.it/2000x600"></columns>
  </row>

  <row class="show-for-large">
    <columns small="12" large="6"><img src="http://placehold.it/2000x600"></columns>
    <columns small="12" large="6">
      <h2>test</h2>
      <p >Lorem ipsum dolor sit amet</p>
    </columns>
  </row>

 

Even though the show-for-large class is working well, the hide-for-large is not displayed at all on mobile (iPhone 6, mail).

Any help would be more than appreciated.

 

R.

Kim Howell over 2 years ago

Hi Guys,

 

Trying to implement code as per Corey's. I can get the image to swap over but for some reason the two images (Desktop and mobile) don't run to full width of EDM container.

I have tried various options, using wrapper can 100% width class etc.

 

code for the html is:

 

 <row>

        <columns large="12">

            <!-- Desktop -->

            <!--[if !mso]><!-->

            <div style="max-height:0;line-height:0;overflow:hidden;mso-hide:all;display:none;" class="trigger-desktop width-100" width="800" height="auto" >

                <img src="http://hitachicm.com.au/Media/Default/edm/Zaxis%20Mini%20Promotion%20April%202017/EDM_hero_desktop.jpg">

            </div>

            <!--<![endif]-->

            

            <!-- Mobile -->

            <div style="display:block;" class="trigger-mobile width-100">

                <img src="http://hitachicm.com.au/Media/Default/edm/Zaxis%20Mini%20Promotion%20April%202017/EDM_hero_mobile.jpg">

            </div>

        </columns>

    </row>

 

CSS code is:

 

// toggle desktop off and mobile on with max-width media query

@media only screen and (max-width: #{$desktop-breakpoint}) {

    .trigger-desktop{

        display:none!important;

        max-height:0!important; /*removing anything that can cause spacing or height*/

        mso-hide: all!important; /*turning content off for outlook*/

    }

    .trigger-mobile{

        display:block!important;

        max-height: none!important; /*set to whatever is appropriate when turned on*/

        mso-hide: none!important;  /*resetting to on for outlook*/

    }

 

// toggle desktop on and mobile off MINIMUM WIDTH media query

@media only screen and (min-width: #{$mobile-breakpoint}) {

    .trigger-desktop{

        display:block!important;

        max-height:none!important; 

        overflow:auto;

        mso-hide:none!important; 

 

    }

    .trigger-mobile{

        display:none!important;

        max-height: 0!important;

        mso-hide: all!important; 

    }

 

Have I missed something?

 

Thanks in advance

 

Kim

Corey Schaaf over 2 years ago

Hey Kim, 

Since this was an older post, it's not relative for Gmail anymore.  Gmail now supports media queries which accounts (as I write this) for about 30% of mobile email traffic. 

Foundation has updated their framework, so depending on the version you are using, some of the steps above might be out of date.  Which version of Foundation for Emails do you have installed?  Let's start there first.