title: How to make border height appear same on all devices
body: <p>I have designed two borders. One behind the image (black border) and the second on the image (green border). I want the height of both borders same across all the mobile devices. I have set the height of a border according to the mobile screen size of 320px, But when I try to change the screen size to a different size e.g(375px, 414px, etc), the height comes out of its normal size. How do I make it appear same on every device. I am using the mobile-first approach.</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;img-border1&quot; &gt;
              
       &lt;img src=&quot;https://cdn.cnn.com/cnnnext/dam/assets/201209140756-jimenez-covid-19-vaccine-distribution-rural-us-dnt-vpx-super-169.jpg&quot; alt=&quot;&quot;&gt;
   &lt;/div&gt;
  </code></pre>
  <p>SCSS:</p>
  <pre><code>.img-border1{
      position: relative;
      border: 4px solid #000;
      width: 20%;
      height: 200px;
    
      img{
          position: absolute;
          width: 100%;
          transition: .25s;
          left: 10px;
          top: 10px;  
      }
      
      &amp;::after{
          border: 4px solid green;
          content: &quot;&quot;;
          display: block;
          position: absolute;
          top: 20px;
          left: 15px;
          right: -20px;
          bottom: -15px;
      }
  }
  </code></pre>
  <p>Here is the visual representation: <a href="https://codepen.io/zaidik/pen/dypWJJb" rel="nofollow noreferrer">Codepen</a></p>
  <p>You can check by setting the different mobile screen sizes in the chrome dev tool.</p>
  <p>Please any help would be appreciated.</p>