0

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

Joergi
  • 1,527
  • 3
  • 39
  • 82

1 Answers1

1

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

  • hmmm what is then wrong in the example above? If i go to desktop size, I see only the desktop but if i make it smaller, I see both, which I don't want, I only wanna see the mobile – Joergi May 15 '20 at 11:23
  • Please check the elements in your browser using the inspect function and the applied styles. It could be different when the styles are inlined / not inlined. –  May 15 '20 at 14:55
  • Ah I think I know what the issue may be. We used `!important` in the last release but changed / fixed this in the `develop` branch. See also https://github.com/foundation/foundation-emails/issues/999 –  May 15 '20 at 21:36
  • Ok, so I will wait for the new release. because we are already on 2.2.1 .... – Joergi May 18 '20 at 11:00