UPDATE: Here is the link to the javascript fiddle
When the text on the screen becomes too large for the row, it overlaps onto other rows instead of increasing the height of the row. This could be due to setting the row heights as a percentage value in order to evenly space and align vertically the elements on the HTML page. How can I fix this issue of text overlapping onto adjacent rows? Should I explore options for vertically aligning the rows without specifying their height? Or should I maintain the current setup and add an overflow property to instruct each row to expand its height when necessary?
All relevant images and code:
Screenshot of fullscreen view (no issues):
https://i.sstatic.net/pzNFf.jpg
Screenshot showing text overlap on middle row element in smaller screens:
https://i.sstatic.net/g3uuE.png
Screenshot displaying text overlap on bottom row in smaller screens:
https://i.sstatic.net/auF73.png
All HTML code used on the page:
<div id="landing-page" class="text-uppercase">
<div class="row hidden-lg-up" style="height:20%;overflow-y:auto;">
<div class="col-xs-3 flex-xs-middle">
<img width="100" src="images/monster2.png" />
</div>
<div class="col-xs-3 offset-xs-6 flex-xs-middle">
<img class="pull-xs-right" width="100" src="images/monster4.png" />
</div>
</div>
<div class="row" style="height:95%;overflow-y:auto;">
<div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top flex-sm-middle">
<img width="80%" src="images/monster2.png" />
</div>
<div class="col-md-12 col-lg-6 flex-xs-middle ">
<div id="motto-text" style="text-align: center;">
<h5 class="text-muted display-6">the vegan repository</h5>
<h1 class="display-3">
find vegan stuff* near you.
</h1>
<a id="try-now-button" class="with-border clickable" href="#search-filter-page">
<h5 class="text-center medium-text">try now</h5>
</a>
</div>
</div>
<div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top flex-sm-middle">
<img class="pull-xs-right" width="80%" src="images/monster4.png" />
</div>
</div>
<div class="row" style="height:5%;overflow-y:auto;">
<h4 class="display-6 flex-xs-bottom">
*Stuff like restaurants, meat alternatives, dairy alternatives, and much more!
</h4>
</div>
</div>
CSS styles applied to the page:
div#landing-page {
background-color: #696969;
height: 100%;
padding: 110px 40px 0px 40px;
overflow-y: auto;
min-height:470px;
}
UPDATE: Here is the link to the javascript fiddle