CODEWITHSUNDEEP
emailresponsive-designzurb-foundationresponsiveinky
Joergi
Joergi

Reputation: 1593

Zurb foundation for emails: Hiding some containers for small devices

when I was questioning on Stackoverflow how to solve my problem with mjml.io and after some research I found that there is also ZURB Foundation emails which should work perfectly on Outlook 2003 (as mentioned on their website).
So I tried to create the same behaviour as I was doing on this MJML.io Tryout page.
My problem is:
I only see show-for-large and hide-for large in the CSS. But I can't see anything which will show-for-small and hide-for-small....

<container class="show-for-large">
  <row>
    <columns  >
      <img src="http://c64os.com/resources/c64c-system.jpg">
    </columns>

  </row>
</container>

<container class="hide-for-large">
  <row>
    <columns>
      <img src="https://www.ecom-ex.com/fileadmin/user_upload/images/products/one-pager/gallery/ex-handy_10_dz1dz2/ex-handy_10_dz1_teaser_1.png">
    </columns>

  </row>
</container>

It works for Desktop, but for mobile it shows both :-( enter image description here

Upvotes: 0

Views: 522

Answers (1)

user753676
user753676

Reputation:

There is only one breakpoint $global-breakpoint ($global-width + $global-gutter) in Foundation Emails (see https://github.com/foundation/foundation-emails/blob/2474651b1de029aea9f5830e95842753bf0242e3/scss/settings/_settings.scss#L40).

show-for-large is the same as hide-for-small andhide-for-large is the same as show-for-small (regarding the logic).

If you need more classes you would have to add / create your own helper classes if you need these classes as we provide only the one which use $global-breakpoint.

See https://github.com/foundation/foundation-emails/blob/develop/scss/components/_visibility.scss

Upvotes: 1

Related Questions