From: Geoff Kimball <geoff@zurb.com>
Date: Mon, 30 Nov 2015 23:26:37 +0000 (-0800)
Subject: Update media query docs to use pixel values in breakpoints map instead of rem-calc()
X-Git-Tag: v6.0.5~24
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=0ad6c281b4647fd93d544e43e372cfdeb85b679b;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Update media query docs to use pixel values in breakpoints map instead of rem-calc()
---

diff --git a/docs/pages/media-queries.md b/docs/pages/media-queries.md
index 43676276e..01a062994 100644
--- a/docs/pages/media-queries.md
+++ b/docs/pages/media-queries.md
@@ -32,14 +32,18 @@ If you're using the Sass version of Foundation, the default breakpoints can be c
 
 ```scss
 $breakpoints: (
-  small: rem-calc(0),
-  medium: rem-calc(640),
-  large: rem-calc(1024),
-  xlarge: rem-calc(1200),
-  xxlarge: rem-calc(1440),
+  small: 0px,
+  medium: 640px,
+  large: 1024px,
+  xlarge: 1200px,
+  xxlarge: 1440px,
 );
 ```
 
+<div class="primary callout">
+  <p>Even though the above values are in pixels, they're converted to ems at the end for use in media queries.</p>
+</div>
+
 Changing the widths of any of the breakpoints is as easy as changing the pixel values in this map. Note that here there are two extra breakpoints: `xlarge` and `xxlarge`. We don't use these for any components, and also don't output any CSS classes that use them by default.
 
 You can change that by modifying the `$breakpoint-classes` variable in your settings file. This is a list of breakpoint names. Adding or removing names from the list will change the CSS class output. It looks like this by default: