Zurb 6 - Desktop being detected as Medium instead of Large

Question

I am using Zurb 6 and trying to hide some elements on small and medium screens using the visibility classes, however my desktop is being detected as a Medium Screen. Why is this?

My fullscreen width is 1920px, I have not altered the breakpoints (copied in below, and there is example code here that is being hidden on my desktop.

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

    <!-- Signature -->
 <div class="signature-container">
  <div class="row signature">
   <div class="large-7 columns">
    <p>Thisi s some example text</p>
   </div>
   <div class="large-1 columns arrow hide-for-small hide-for-medium">&nbsp;</div>
   <div class="large-4 columns digital-signature text-center">
    <img alt="Signature" src="img/signature.png" width="220">
   </div>
  </div>
 </div>
<!-- /Signature -->

score 0 · Answer 1 · answered Jan 29 '16 at 14:14

The way Foundation 6 visibility settings work are based on the defined size and up. So your hide-for-medium is actually for medium and larger. You need to define it as hide-for-medium-only to not hide for larger than medium.

I would actually do hide-for-small and show-for-large which should fix your issue.

See F6 Documentation: http://foundation.zurb.com/sites/docs/visibility.html#hide-by-screen-size

Zurb 6 - Desktop being detected as Medium instead of Large

1 Answers1