title: Make image overlay responsive
body: <p>I've created a simple image overlay by placing an image with the with <code>position:absolute</code> over another image. </p>
  
  <p>As I resize the window the image overlay loses its initial position, causing the two images to seperate. I need them to stick to the same position until the screen reaches mobile width.</p>
  
  <p>Below is the code &amp; here is a <strong><a href="https://codepen.io/jordan_miguel/pen/qPBpMo?editors=1100" rel="nofollow noreferrer">codepen</a></strong>.</p>
  
  <p>HTML - </p>
  
  <pre><code>&lt;div class="projects"&gt;
    &lt;div id="images" class="stella"&gt;
      &lt;div class="desktop-image"&gt;
        &lt;img src="https:http://i3.mirror.co.uk/incoming/article10811001.ece/ALTERNATES/s1200/Arsenal-player-Alexandre-Lacazette-takes.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="mobile-image-stella"&gt;
        &lt;img src="https:http://i3.mirror.co.uk/incoming/article10811001.ece/ALTERNATES/s1200/Arsenal-player-Alexandre-Lacazette-takes.jpg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="images" class="scf"&gt;
      &lt;div class="desktop-image"&gt;
        &lt;img src="https:http://i3.mirror.co.uk/incoming/article10811001.ece/ALTERNATES/s1200/Arsenal-player-Alexandre-Lacazette-takes.jpg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="images" class="misma"&gt;
      &lt;div class="desktop-image"&gt;
        &lt;img src="http://i3.mirror.co.uk/incoming/article10811001.ece/ALTERNATES/s1200/Arsenal-player-Alexandre-Lacazette-takes.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="mobile-image-misma"&gt;
        &lt;img src="https:http://i3.mirror.co.uk/incoming/article10811001.ece/ALTERNATES/s1200/Arsenal-player-Alexandre-Lacazette-takes.jpg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS - </p>
  
  <pre><code>.projects {
    width: 100;
    margin: 0 auto;
  }
  
  #images {
    text-align: center;
    padding-bottom: 230px;
  }
  
  #images img {
    width: 50%;
    height: 50%;
    border: 5px solid #0f0f10;
  }
  
  .mobile-image-stella {
    width: 30%;
    position: absolute;
    top: 112%;
    left: 22%;
  }
  
  .mobile-image-misma {
    width: 30%;
    position: absolute;
    top: 332%;
    left: 22%;
  }
  </code></pre>
  
  <p>And here is a media query that I tried in order to fix the problem </p>
  
  <pre><code>@media (min-width: 900px) and (max-width: 1428px) {
    .mobile-image-stella {
      width: 30%;
      position: absolute;
      top: 112%;
      left: 22%;
    }
  
    .mobile-image-misma {
      width: 30%;
      position: absolute;
      top: 332%;
      left: 22%;
    }
  }
  </code></pre>