When resizing vertically on mobile, my date-time-container is overlapping the upper elements welcome and weather. Despite setting them as block level elements, adding clear: both, and not using absolute positioning or floats, the overlap issue persists. Any insights on why this is happening?
@media screen and (max-width: 960px) {
body {
max-width: 100vw;
max-height: 100%;
overflow: hidden;
}
#weather {
display: flex;
position: relative;
clear: both;
justify-content: center;
width: 100vw;
height: auto;
padding-right: 6%;
}
#loc-des {
padding-right: 5%;
display: block;
height: auto;
}
#welcome {
position: relative;
height: auto;
text-align: center;
margin: 5% auto 0 auto;
clear: both;
}
#main-container {
max-width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
#date {
position: relative;
display: block;
font-size: 1.3em;
margin-bottom: 3%;
clear: both;
}
#time {
position: relative;
display: block;
clear: both;
}
#date-time-container {
display: block;
position: relative;
clear: both;
height: auto;
}
#time-container {
display: block;
position: relative;
margin: 0 auto;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
clear: both;
}<h1 id="welcome"></h1>
<div id="weather">
<div id="loc-des">
<div id="location"></div>
<div id="description"></div>
</div>
<h1 id="temp"></h1>
</div>
<main id="main-container">
<section id="time-container">
<section id="date-time-container">
<h2 id="time">00:00</h2>
<span id="date"></span>
</section>
<form action="https://www.duckduckgo.com/" target="_blank" autocomplete="off">
<input type="search" name='q' id='search-bar' placeholder="search with duckduckgo ...">
</form>
</section>