How can I adjust my bootstrap based css code so it is more responsive to the page width?

Question

I created this fiddle 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:

I thought about doing it more responsive by adding CSS mobile queries, but then in the code I have:

@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;

}

} 

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!

Answer 1

Set minimum width and height for each class so that the page stops adjusting the text with screen resolutions that are too small. Add min-height:123px; and min width:456px; (adjust px as needed) so that they do not overlap on small screens.

Note: This isn't very good for mobile.