Menu icon Foundation
Foundation for Email - Visibility classes not working

Hey guys, I'm using Inky (Foundation for emails) and I'm trying to have aelements visible on desktop only and mobile only,

 

However only the show-for-large is working, hide-for-large isn't working.

 

Here is my code.

 

<container class="footer-container">
  <row class="collapse">
    <columns small="2" large="2" class="no-pad show-for-large">
      <center>
        <img src="{{ root }}assets/img/Mortons_Email_Draft_1_4_08.jpg" alt="">
      </center>
    </columns>
    <columns small="1" large="1" class="no-pad show-for-large">
      <center>
        <img src="{{ root }}assets/img/Mortons_Email_Draft_1_4_09.jpg" alt="Pintrest">
      </center>
    </columns>
    <columns small="1" large="1" class="no-pad show-for-large">
      <center>
        <img src="{{ root }}assets/img/Mortons_Email_Draft_1_4_10.jpg" alt="Facebook">
      </center>
    </columns>
    <columns small="1" large="1" class="no-pad show-for-large">
      <center>
        <img src="{{ root }}assets/img/Mortons_Email_Draft_1_4_11.jpg" alt="Twitter">
      </center>
    </columns>
    <columns small="1" large="1" class="no-pad show-for-large">
      <center>
        <img src="{{ root }}assets/img/Mortons_Email_Draft_1_4_12.jpg" alt="Youtube">
      </center>
    </columns>
    <columns small="1" large="1" class="no-pad show-for-large">
      <center>
        <img src="{{ root }}assets/img/Mortons_Email_Draft_1_4_13.jpg" alt="Cart">
      </center>
    </columns>
    <columns small="2" large="2" class="no-pad show-for-large">
      <center>
        <img src="{{ root }}assets/img/Mortons_Email_Draft_1_4_14.jpg" alt="">
      </center>
    </columns>
  </row>
</container>
<container class="footer-container2">
  <row class="collapse socials">
    <columns small="2" large="1" class="hide-for-large">
      <center>
        <img src="{{ root }}assets/img/Pintrest.jpg" alt="Pintrest">
      </center>
    </columns>
    <columns small="2" large="1" class="hide-for-large">
      <center>
        <img src="{{ root }}assets/img/Facebook.jpg" alt="Facebook">
      </center>
    </columns>
    <columns small="2" large="1" class="hide-for-large">
      <center>
        <img src="{{ root }}assets/img/Twitter.jpg" alt="Twitter">
      </center>
    </columns>
    <columns small="2" large="1" class="hide-for-large">
      <center>
        <img src="{{ root }}assets/img/YouTube.jpg" alt="Youtube">
      </center>
    </columns>
    <columns small="2" large="1" class="hide-for-large">
      <center>
        <img src="{{ root }}assets/img/Cart.jpg" alt="Cart">
      </center>
    </columns>
  </row> 
</container>

visibility classesResponsivefoundation for emails

Hey guys, I'm using Inky (Foundation for emails) and I'm trying to have aelements visible on desktop only and mobile only,

 

However only the show-for-large is working, hide-for-large isn't working.

 

Here is my code.

 

<container class="footer-container">
  <row class="collapse">
    <columns small="2" large="2" class="no-pad show-for-large">
      <center>
        <img src="{{ root }}assets/img/Mortons_Email_Draft_1_4_08.jpg" alt="">
      </center>
    </columns>
    <columns small="1" large="1" class="no-pad show-for-large">
      <center>
        <img src="{{ root }}assets/img/Mortons_Email_Draft_1_4_09.jpg" alt="Pintrest">
      </center>
    </columns>
    <columns small="1" large="1" class="no-pad show-for-large">
      <center>
        <img src="{{ root }}assets/img/Mortons_Email_Draft_1_4_10.jpg" alt="Facebook">
      </center>
    </columns>
    <columns small="1" large="1" class="no-pad show-for-large">
      <center>
        <img src="{{ root }}assets/img/Mortons_Email_Draft_1_4_11.jpg" alt="Twitter">
      </center>
    </columns>
    <columns small="1" large="1" class="no-pad show-for-large">
      <center>
        <img src="{{ root }}assets/img/Mortons_Email_Draft_1_4_12.jpg" alt="Youtube">
      </center>
    </columns>
    <columns small="1" large="1" class="no-pad show-for-large">
      <center>
        <img src="{{ root }}assets/img/Mortons_Email_Draft_1_4_13.jpg" alt="Cart">
      </center>
    </columns>
    <columns small="2" large="2" class="no-pad show-for-large">
      <center>
        <img src="{{ root }}assets/img/Mortons_Email_Draft_1_4_14.jpg" alt="">
      </center>
    </columns>
  </row>
</container>
<container class="footer-container2">
  <row class="collapse socials">
    <columns small="2" large="1" class="hide-for-large">
      <center>
        <img src="{{ root }}assets/img/Pintrest.jpg" alt="Pintrest">
      </center>
    </columns>
    <columns small="2" large="1" class="hide-for-large">
      <center>
        <img src="{{ root }}assets/img/Facebook.jpg" alt="Facebook">
      </center>
    </columns>
    <columns small="2" large="1" class="hide-for-large">
      <center>
        <img src="{{ root }}assets/img/Twitter.jpg" alt="Twitter">
      </center>
    </columns>
    <columns small="2" large="1" class="hide-for-large">
      <center>
        <img src="{{ root }}assets/img/YouTube.jpg" alt="Youtube">
      </center>
    </columns>
    <columns small="2" large="1" class="hide-for-large">
      <center>
        <img src="{{ root }}assets/img/Cart.jpg" alt="Cart">
      </center>
    </columns>
  </row> 
</container>

Corey Schaaf almost 3 years ago

hide-for-large is not currently supported in gmail or yahoo clients (or any clients that don't understand media queries). 

Gmail has announced support for media queries this month so support will be coming to gmail soon. 

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