Mi date-time-container se superpone a mis elementos superiores de welcome y weather en el cambio de tamaño vertical en el móvil. No tengo ningún elemento posicionado absoluto, no estoy usando flotantes, los he convertido en elementos de nivel de bloque, y también agregué claro: ambos, pero aún se superponen. ¿Alguna idea de por qué está ocurriendo esto?
@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>Es porque no tienen ningún contenido en él.
Si agrega algunos contenidos entre cada etiqueta ( <h1> <div> ), tendrán su propio espacio.
Si quieres hacer elementos sin contenido,
puede agregar un espacio sin interrupciones o dar padding o height .