finishing touches

mobilecss.css

@@ -232,7 +232,7 @@ body > footer{
   padding-top: 10px;
 	border: 3px solid #A8ABAE;
 }
-@media screen and (max-width: 600px){
+@media screen and (max-width: 480px){
  body .slide.current {
     position: static;
     width: 90%;

play/mediaqueries.html

@@ -13,7 +13,7 @@
 
 </style>
 
-<style contenteditable>@media screen and (max-width: 500px){
+<style contenteditable>@media screen and (max-width: 550px){
   :root {background-color: lightsteelblue;}
   body {text-decoration: underline;}
 }

responsive.html

@@ -81,6 +81,23 @@ <h1 style="text-align: left">1.    Screen Size <br/>
   </header>
 </div>
 
+<div class="slide normal" style="background-image: url(images/devicesizes.jpg); background-position:bottom;">
+  <header><h1>Varied Screen Sizes</h1></header>
+    <section class="content">
+      <ul style="margin-top: 270px; font-size:1.1em">
+      <li>Wrist Watch</li>
+      <li>Smart Phone</li>
+      <li>Tablet</li>
+      <li>Laptop</li>
+      <li>Monitor</li>
+      <li>TV</li>
+      <li></li>
+      <li>portrait v. landscape?</li>
+      <li>high and low resolution?</li>
+      </ul>
+    </section>
+</div>
+
 
 <!-- media queries: browser support -->
  <div class="slide normal">
@@ -163,7 +180,7 @@ <h1 style="text-align: left">1.    Screen Size <br/>
 
 <div class="slide object">
   <object data="play/mediaqueries.html"></object>
-  <a href="files/mediaqueries.html" class="objectlink" target="play">Play</a>
+  <a href="play/mediaqueries.html" class="objectlink" target="play">Play</a>
  </div>