title: Making a container responsive in CSS
body: <p>I have the following code, that I am looking to make responsive for mobile display:</p>
  <pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, maximum-scale=1&quot;&gt;
  
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Login Retrieve&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class=&quot;container&quot; id=&quot;container&quot; style=&quot;min-height: 530px !important;margin-top: 5%;&quot;&gt;
    &lt;div class=&quot;form-container log-in-container&quot; style=&quot;    background: white;&quot;&gt;
  
      Hellow world
    &lt;/div&gt;
    &lt;div class=&quot;overlay-container&quot; style=&quot;background-image:url('/assets/iphone.png');   background-repeat: no-repeat;
        background-size: 100%;&quot;&gt;
      &lt;div class=&quot;overlay-right&quot; style=&quot;color: white;font-weight: 600;margin-top: 94%;margin-left: 14px;&quot;&gt;
    Test 1233
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I thought that adding the first line would help, but it doesnt. The two containers are still showing next to each others.
  Is there a way to fix it with css only (ideally).</p>
  <pre><code> .container {
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
      position: relative;
      overflow: hidden;
      width: 768px;
      max-width: 100%;
      min-height: 480px;
    }
  
    .form-container {
      position: absolute;
      top: 0;
      height: 100%;
    }
  
    .log-in-container {
      left: 0;
      width: 50%;
      z-index: 2;
    }
  
  
    .overlay-container {
      position: absolute;
      top: 0;
      left: 50%;
      width: 50%;
      height: 100%;
    }
  
  
    .overlay {
      background: #44B5EB;
      background: -webkit-linear-gradient(to right, #44B5EB, #0daaf5);
      background: linear-gradient(to right, #44B5EB, #0daaf5);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 0 0;
      color: #FFFFFF;
      position: relative;
      left: -100%;
      height: 100%;
      width: 200%;
    }
  
    .overlay-panel {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 0 40px;
      text-align: center;
      top: 0;
      height: 100%;
      width: 50%;
    }
    .myClass {
      background: image-url('Admiralty.png');
    }
  </code></pre>
  <p>I have just added the styling that I am currently using.</p>