My date-time-container overlaps my upper elements of welcome and weather on vertical resize in mobile. I do not have any elements positioned absolute, I'm not using floats, I have made them block level elements, and also added clear: both, but they still overlap. Any idea on why this is occurring?
@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>It's because they don't have any content in it.
If you add some contents between each tag(<h1> <div>), they will have their own space.
If you want to make elements with no content,
you can add non-breaking space or give padding or height.