title: having difficulty with responsive web design
body: <p>I would like the image to be a larger size on the computer, but to fit smaller devices. But when I try to have a larger image size for the computer, it also increase the size on the phone, and it shrinks and pushes my navigation (which is supposed to be in the middle) to the left. (my navigation is meant to be on the left hand side on the computer, but in the middle just horizontally on the smaller devices) How can I set different image sizes for different devices? I tried @media but it doesn't seem to be working. I'm a beginner, so could anyone see what it is that i'm doing wrong?</p>
  
  <p>Areas where i experience the issue are on .typecontainer, .type, .type1</p>
  
  <p>Link to Screenshots: <a href="http://imgur.com/bM5xdWR,P9eUx4v,mq3gpP1#0" rel="nofollow">http://imgur.com/bM5xdWR,P9eUx4v,mq3gpP1#0</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Example&lt;/title&gt;
      &lt;link rel=”stylesheet” type=”text/css” href=”style.css” /&gt;
      &lt;meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0”&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id=”topNav”&gt;
  &lt;nav class=”navigation” role=”navigation”&gt;
  &lt;ul&gt;
      &lt;li class=”Work”&gt;
          &lt;a href=”Work.html”&gt;Work&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=”About”&gt;
          &lt;a href=”About.html”&gt;About&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=”Contact”&gt;
          &lt;a href=”Contact.html”&gt;Contact&lt;/a&gt;
      &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class=”typecontainer”&gt;
      &lt;img class=”type” src=”image.jpg”&gt;
      &lt;img class=”type1” src=”type1.jpg”&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#topNav{
      display:block;
      margin-left: 50px;
  }
  
  ul{
      padding:0;
  }
  
  ul li
  {
      list-style-type: none!important;
      font-family: 'PT Sans', Arial, sans-serif;
      display: block;
      margin-top: 6%;
      padding: 0 5px;
      font-size:25px;
      font-style: normal;
      font-weight: 100;
      line-height: 1%;
      float:left;
      margin-left: 18px;
      letter-spacing: -1px;
  
  
  /* iphone */
  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
      .iphonecontainer .iphone .typecontainer .type .type1
      { max-width: 100%; }
  }
  
  /* ipad */
  @media only screen and (min-device-width : 768px) and (max-device-width :  1024px) {
      .iphonecontainer .iphone .typecontainer .type .type1
      { max-width: 100%; }
  }
  
  /* iphone */
  @media (max-width : 480px) and (min-width : 320px) {
      #topNav{
          margin: 0 auto;
          width: 320px;
      }
      ul{
          padding:15px;
      }
  }
  
  /* ipad */
  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
      #topNav{
          margin: 0 auto;
          width: 320px;
      }
      ul{
          padding:15px;
      }
  }
  
  /* iphone */
  @media (max-width : 480px) and (min-width : 320px) {
      #work_links{
          margin: 8%;
          width: 320px;
      }
  }
  
  .typecontainer
  {
  width:100%;
  float:left;
  margin-top:6.5%;
  }
  
  .type {
   display:block;
   max-width: 500px;
   margin: 0px auto;
   padding: 0;
   }
  
   .type1 {
   display:block;
   max-width: 500px;
   margin: 0px auto;
   padding: 0;
   }
  </code></pre>