title: Make image relative (change position between computer and phone)
body: <p>I am trying to build a site and I have a problem. When I try to upload an image, if I press f12 and use a phone view, it works perfectly. However, when I exit from the phone view and look on a full size PC, the position of the image changes.</p>
  
  <p>This is the CSS for the image:</p>
  
  <pre class="lang-css prettyprint-override"><code>#showpic {
      position: relative;
      width: 100%;
      margin-top: 12%;
      height: 38vh;
  }
  </code></pre>
  
  <p>and this is the image html</p>
  
  <pre><code>&lt;div&gt;&lt;img id="showpic" src="image/frontpic.jpg" /&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Full HTML</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;html lang="en-US"&gt;
  
      &lt;head&gt;
          &lt;title&gt;Index Page&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;script type="text/javascript" src="js/script.js"&gt;&lt;/script&gt; 
          &lt;link rel="stylesheet" href="css/style.css" /&gt;
          &lt;link rel="stylesheet" href="css/portLand.css" /&gt;
      &lt;/head&gt;
  
          &lt;body&gt;
              &lt;header id="header"&gt;
                  &lt;img src="image/headerlogo.png" id="LogoP"  alt="headerlogo" /&gt;
                  &lt;nav id="nav"&gt;
                      &lt;a href="site.html"&gt; &lt;button class="btnMenu" style='width:17%'&gt;&lt;b&gt;Home&lt;/b&gt;&lt;/button&gt; &lt;/a&gt;
                      &lt;a href="site.html"&gt; &lt;button class="btnMenu" style='width:17%'&gt;&lt;b&gt;America&lt;/b&gt;&lt;/button&gt; &lt;/a&gt;
                      &lt;a href="site.html"&gt; &lt;button class="btnMenu" style='width:17%'&gt;&lt;b&gt;Europe&lt;/b&gt;&lt;/button&gt; &lt;/a&gt;
                      &lt;a href="site.html"&gt; &lt;button class="btnMenu" style='width:17%'&gt;&lt;b&gt;About&lt;/b&gt;&lt;/button&gt; &lt;/a&gt;
                      &lt;a href="site.html"&gt; &lt;button class="btnMenu" style='width:17%'&gt;&lt;b&gt;Contacts&lt;/b&gt;&lt;/button&gt; &lt;/a&gt;
                  &lt;nav&gt;
              &lt;/header&gt;
              &lt;div&gt;&lt;img id="showpic" src="image/frontpic.jpg" /&gt;&lt;/div&gt;
  
          &lt;/body&gt;
  
      &lt;footer&gt;
      &lt;/footer&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Full CSS </p>
  
  <pre class="lang-css prettyprint-override"><code>body {
      margin: 0;
      width: 100%;
      height: 100vh;
      background: #E6EEFC;
  }
  #header {
      top: 0;
      width: 100%;
      height: 7vh;
      position: fixed;
      background: #0059FF;
  }
  #LogoP {
      top: 0;
      left: 7%;
      width: 15%;
      height: 7vh;
      position: absolute;
      display: inline-block;
  }
  #nav {
      width: 80%;
      height: 5vh;
      margin-left: 21%;
      padding-top: 0.5%;
      text-align: center;
      padding-bottom: 0.5%;
  }
  .btnMenu {
      height: 5vh;
      width: 2%;
      margin: 0;
      color: white;
      margin-left: 1%;
      font-size: 1.4vh;
      text-align: center;
      border-radius: 25px;
      display: inline-block;
      background: linear-gradient(0deg, purple, white);
  }
  #showpic {
      position: relative;
      width: 100%;
      margin-top: 12%;
      height: 38vh;
  }
  </code></pre>