changes media query file name and adds example

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 343348edc3df41c4079075b49c1ef8f1faa1cd30..621244b4d6881ca91d52237f7948367f3f76652a 100644 (file)
--- 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;
+  }
+}
+```
+
+
 
 ---