title: How can I adjust my bootstrap based css code so it is more responsive to the page width?
body: <p>I created <a href="https://jsfiddle.net/2nexo75j/" rel="noreferrer">this fiddle</a> as you can see there I have a webpage with two texts, one below another. It works great on wide screens, but when I shrink the webpage - or run the webpage on mobile - it is messed up, like on this screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/AYlwc.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AYlwc.png" alt="enter image description here"></a></p>
  
  <p>I thought about doing it more responsive by adding CSS mobile queries, but then in the code I have:</p>
  
  <pre><code>@media (max-width: 545px) {
  
  
  .outer{
    width:100%;
    height:330px;
    top:0;
    position:relative;
  }
  
  .inner1{
    width:100%;
    height:320px;
    margin-bottom:0px;
  
  }
  .inner2{
    width:100%;
    height:330px;
    margin-bottom:0px;
  
  }
  }
  
  @media (max-width: 435px) {
  
  .outer{
    width:100%;
    height:380px;
    top:0;
    position:relative;
  }
  
  .inner1{
    width:100%;
    height:370px;
    margin-bottom:0px;
  
  }
  .inner2{
    width:100%;
    height:380px;
    margin-bottom:0px;
  
  }
  
  }
  
  @media (max-width: 378px) {
  
   .outer{
    width:100%;
    height:460px;
    top:0;
    position:relative;
  }
  
  .inner1{
    width:100%;
    height:450px;
    margin-bottom:0px;
  
  }
  .inner2{
    width:100%;
    height:460px;
    margin-bottom:0px;
  
  }
  
  } 
  </code></pre>
  
  <p>etc., so lot's of values for different screen widths. I suspect there's some other way of doing that, the most responsive way in which I don't need to cover each screen width separately in mobile CSS...
  Can you give me any hint how could I change my code so it works independently on any device/screen width?
  Thanks!</p>