title: How to position images appropriate for a mobile browser in html/css
body: <p>I have a small fairly simple website.  It's just an image that updates based on certain interactions, and a second image that I have text on top of.  The long and short of it is it looks good on a desktop browser, but horrible on mobile.  The only person I'm wanting to see this little project will be looking on a mobile browser.</p>
  
  <p>I figure worst case (and probably easiest) I can arrange the pictures one above the other so that maybe when opened on mobile it will look ok (right now they are side by side and are getting smooshed together on mobile).  However, if there is some way I can actually make it look good both ways that would be a better learning experience.</p>
  
  <p>I am not familiar really but here is the CSS:</p>
  
  <pre><code>.mainImage {
  
    position: absolute;
  
   border: 5px outset #8306C1;
    text-align: center;
    color: black;
  }
  
  .container {
  
    position: absolute;
  
    top: 500;
    left: 100px;
    text-align: center;
    color: black;
  }
  </code></pre>
  
  <p>and below is the relevant html:</p>
  
  <pre><code>&lt;img id = "mainImage" class = "mainImage" src="./starterImage.jpg" width="381" height="675" top="30";
    left=850";&gt;
  
  &lt;div class="container"&gt;
   &lt;img id = "scroll" class = "scroll" src="./scroll.png" width="500" height="500"&gt;
    &lt;div id="centered" class="centered"&gt;Happy 10 year anniversary Hanna!&lt;/div&gt;
    &lt;div id="centered1" class="centered1"&gt;&lt;/div&gt;
     &lt;div id="centered2" class="centered2"&gt;&lt;/div&gt;
      &lt;div id="centered3" class="centered3"&gt;&lt;/div&gt;
       &lt;div id="centered4" class="centered4"&gt;&lt;/div&gt;
       &lt;div id="centered5" class="centered5"&gt;&lt;/div&gt;
       &lt;div id="centered6" class="centered6"&gt;&lt;/div&gt;
       &lt;div id="centered7" class="centered7"&gt;&lt;/div&gt;
       &lt;div id="centered8" class="centered8"&gt;&lt;/div&gt;
       &lt;div id="centered9" class="centered9"&gt;&lt;/div&gt;
       &lt;div id="centered10" class="centered10"&gt;&lt;/div&gt;
       &lt;div id="centered11" class="centered11"&gt;&lt;/div&gt;
       &lt;div id="centered12" class="centered12"&gt;&lt;/div&gt;
       &lt;div id="centered13" class="centered13"&gt;&lt;/div&gt;
       &lt;div id="centered14" class="centered14"&gt;&lt;/div&gt;
        &lt;div id="centered15" class="centered15"&gt;&lt;/div&gt;
        &lt;div id="centered16" class="centered16"&gt;&lt;/div&gt;
        &lt;div id="centered17" class="centered17"&gt;&lt;/div&gt;
        &lt;div id="centered18" class="centered18"&gt;&lt;/div&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried to include this in the header but it hasn't helped me:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt; 
  </code></pre>
  
  <p>Any help would be appreciated :).  The website is just a title header at the top, an image on the left that has various text on it depending on the image to the right, and a button below that changes the image/text.</p>