CODEWITHSUNDEEP
htmlcssresponsive
Mitrixsen
Mitrixsen

Reputation: 323

Why is the content from the bottom sections overflowing to the sections above

I am making a copy of the SpaceX website to get a bit of CSS/JS practise. Currently, I am at the homepage that consists of 5 sections that contain some content (title, description and a button) and each section has a background image so far, I am nearly done with it.

I was testing how responsive the website is on several devices and encountered a small issue. Whenever I resize the browser height, the content from the bottom sections start to overflow to the sections above. Here is an image of it.

Normal look enter image description here

When I resize the browser height enter image description here

This occurs several times, here as well for example enter image description here

/* GENERAL */

* {
    padding: 0;
    margin: 0;
}

body {
    text-transform: uppercase;
    font-style: swap;
}



/* SECTIONS */

.page {
    height: 100vh;
    padding-top: 1px;
    position: relative;
}

.homepage {
    background: url("/IMGs/homepage.jpg");
    background-position: center;
    background-size: cover;
}

.second-page {
    background: url("/IMGs/SecondPage.jpg");
    background-size: cover;
}

.third-page {
    background: url("/IMGs/ThirdPage.jpg");
    background-size: cover;
}

.fourth-page {
    background: url("/IMGs/FourthPage.jpg");
    background-size: cover;
}

.fifth-page {
    background: url("/IMGs/FifthPage.jpg");
    background-size: cover;
}

.sixth-page {
    position: relative;
    height: 100vh;
}

.mission-container {
    color: white;
    text-shadow: 0 0 2px rgb(0, 0, 0);
    font-size: 2em;
    text-align: left;
    position: absolute;
    left: 10%;
    bottom: 20%;
}

.launch {
    margin-bottom: 0.3em;
    font-size: 0.8em;
    font-weight: 100;
}

.mission-name {
    margin-bottom: 1em;
}

.dragon {
    margin-bottom: 0.35em;
}

.mission-text {
    font-size: 0.5em;
    margin-bottom: 2em;
    line-height: 30px;
}

.rewatch-btn {
    border: 2.5px solid white;
    color: white;
    text-decoration: none;
    font-size: 0.6em;
    padding: 0.9em 2.3em;
}

@media screen and (max-width: 947px) {
    .mission-container {
        left: 8%;
        bottom: 18%;
        font-size: 1.4em;
    }

    .rewatch-btn {
        padding: 1.5em 3.5em;
    }

}

@media screen and (max-width: 747px) {
    .third-page {
        background: url("/IMGs/ThirdPage_mobile.jpg");
        background-position: center;
        background-size: cover;
    }

    .fourth-page {
        background: url("/IMGs/FourthPage_mobile.jpg");
        background-size: cover;
    }
}
<html>
<body>
    <section class="homepage page">
        <div class="mission-container first">
            <h4 class="launch">recent launch</h4>
            <h1 class="mission-name">TRANSPORTER-2 MISSION</h1>
            <a href="#" class="rewatch-btn">REWATCH</a>
        </div>
    </section>
    <section class="second-page page">
        <div class="mission-container">
            <h4 class="launch">recent launch</h4>
            <h1 class="mission-name">CRS-22 MISSION</h1>
            <a href="#" class="rewatch-btn">REWATCH</a>
        </div>
    </section>
    <section class="third-page page">
        <div class="mission-container">
            <h4 class="launch">completed mission</h4>
            <h1 class="mission-name dragon">DRAGON RETURNS TO <br> EARTH</h1>
            <p class="mission-text">After 167 days, Dragon completes its first long-duration mission.</p>
            <a href="#" class="rewatch-btn">REWATCH</a>
        </div>
    </section>
    <section class="fourth-page page">
        <div class="mission-container">
            <h4 class="launch">RECENT LAUNCH</h4>
            <h1 class="mission-name">STARLINK MISSION</h1>
            <a href="#" class="rewatch-btn">REWATCH</a>
        </div>
    </section>
    <section class="fifth-page page">
        <div class="mission-container">
            <h1 class="mission-name">Starship to <br> Land NASA <br> Astronauts on <br> the Moon</h1>
            <a href="#" class="rewatch-btn">LEARN MORE</a>
        </div>
    </section>
   
</body>
</html>

Do you guys have any suggestions on how to fix this issue? Thanks in advance!

Upvotes: 0

Views: 44

Answers (2)

Mr.Goat
Mr.Goat

Reputation: 26

Yes it is vertical height that causes overflow when resizing page. There is isn't really an alternative for px or vh or vw (vertical width). I guess you can set height using percent of page

height: 10%;

however this would mean that it's height would change every time you add or remove elements so I would suggest using a more javascript approach that will detect screen height then set elements height to match the screen height.

function coverScreen(myElementArray) {
// store screen height in variable;
var sh = screen.height;

//loop through elements in array and assign height value
for (var i = 0; i < myElementArray; i++){
myElementArray[i].style.height = sh + "px";
}
}

// get elements and store in variables
var el1 = document.getElementById("myElementsIdHere");
var el2 = document.getElementById("myElementsIdHere");
var el3 = document.getElementById("myElementsIdHere");

//call function and fill parameter 
//with array containing element variables
coverScreen([el1, el2, el3]);

Upvotes: 1

Mr.Goat
Mr.Goat

Reputation: 26

I noticed that in the code the height properties were set using "vh" (vertical height) instead of "px" (pixels). Pixels is a unit of distance on a screen that will never change no matter how the page is resized. vh (vertical height) is a unit of distance on a screen that is determined by the viewport. 1vh is 1% of the viewport height. Learn More about viewport units here.

Upvotes: 0

Related Questions