From 2b3cc8f65e03049eb5effec8e06411a4b4e84fd0 Mon Sep 17 00:00:00 2001
From: RafiBomb <rafi@zurb.com>
Date: Mon, 21 Mar 2016 10:31:20 -0700
Subject: [PATCH] changes media query file name and adds example

---
 .../{media-queries.md => media-query.md}      | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)
 rename docs/pages/{media-queries.md => media-query.md} (93%)

diff --git a/docs/pages/media-queries.md b/docs/pages/media-query.md
similarity index 93%
rename from docs/pages/media-queries.md
rename to docs/pages/media-query.md
index 343348ed..621244b4 100644
--- a/docs/pages/media-queries.md
+++ b/docs/pages/media-query.md
@@ -3,12 +3,10 @@ title: Foundation for Emails
 description: Use media queries to design responsive HTML emails that work in any email client.
 ---
 
-CSS media queries allow us to adjust the display and orientation of content at different screen sizes.
-
----
-
 ## Default Media Query
 
+CSS media queries allow us to adjust the display and orientation of content at different screen sizes.
+
 Foundation for Emails has one breakpoint:
 
 - Small: 596 pixels or smaller.
@@ -34,21 +32,21 @@ In Inky, you can define the width by using the `small="x"` and `large="x"` attri
 
 The media query will wrap the styles you wish to affect. Because there is only one breakpoint to consider and it's a max-width, your mobile styles or overrides will go in a media query. If you're using the CSS version of Foundation, use this media query to imitate the core breakpoint:
 
-```
+```scss
 /* Small only */
 @media screen and (max-width: 596px) {}
 ```
 
 The Sass version of Foundation uses a convenient variable to set the breakpoint width. Use this media query to imitate the core breakpoint:
 
-```
+```scss
 /* Small only */
 @media only screen and (max-width: #{$global-breakpoint}) {}
 ```
 
 ### Example usage
 
-```
+```scss
 .newsletter-title {
   text-transform: uppercase;
   font-size: 9px;
@@ -61,6 +59,16 @@ The Sass version of Foundation uses a convenient variable to set the breakpoint
 }
 ```
 
+```scss
+@media only screen and (max-width: #{$global-breakpoint}) {
+  p {
+    font-size: 19px;
+    font-weight: 600;
+  }
+}
+```
+
+
 
 ---
 
-- 
2.47.2