title: Image won't resize using media query
body: <p>I am trying to resize an image on a <code>html</code> page when it is displayed on a browser.</p>
  
  <p>The <code>HTML</code> used us as follows;</p>
  
  <pre><code>&lt;body class="layout-4"&gt;
      &lt;div id="wrapper"&gt;
          &lt;header id="header"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-sm-2"&gt;
                          &lt;div class="site-logo"&gt;
                              &lt;img class="logoimage" src="assets/images/emailsig.png" alt="Logo Image" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-10 align-right"&gt;
                          &lt;button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#main-menu"&gt;
                              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;nav id="main-menu" class="collapse" role="navigation"&gt;
                              &lt;ul class="nav-menu clearfix"&gt;
                                  &lt;li&gt;&lt;a href="#wrapper"&gt;Home&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#about"&gt;Specialisms&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#feature1"&gt;Contextual&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#feature2"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#how-it-works"&gt;Media&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#team"&gt;Team&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="phone-call"&gt;&lt;a href="callto:+44 12345678"&gt;Phone  &lt;/a&gt;/&lt;a href="mailto:email"&gt;   Email&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/nav&gt;&lt;!-- /#main-menu --&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!-- /.container --&gt;
              &lt;div class="back-to-top"&gt;
                  &lt;!-- Back to top button --&gt;
                  &lt;a href="#wrapper"&gt;&lt;img src="assets/images/arrow-top.png" alt="Back to Top" title="Back to Top" /&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/header&gt;&lt;!-- /#header --&gt;
  </code></pre>
  
  <p>I am using a number of <code>media queries</code> for different resolutions (will paste one example below)</p>
  
  <pre><code>@media screen and max-width1200px {
      div.site-logo {
          max-width:70%;
      }
  
      img.logoimage {
          max-width:1%;
      }
  }
  </code></pre>
  
  <p>Now as my understanding goes, this should set the total space allowed for the <code>div</code> that the image is in to <code>70%</code> of the total width of the page, and then my image should be allowed just a <code>max-width</code> of <code>1%</code> (this is so small because I just wanted to test that it was working). The image however still extends well off of the edge of the page on my iPhone.</p>
  
  <p>How else can an image be scaled to fit a mobile screen correctly?</p>