Personal Portfolio Height problem

HTML-CSS
1

I am having trouble with User Story #10 - “The Height of the welcome section should be equal to the height of the viewport.”

I have researched this last night for a few hours and all answers say I need to make the Height element in CSS ‘100vh’ for my welcome-section.

Which I have done but it still doesn’t take when I run the tests.

**Your code so far -
#welcome-section {
background-color: #339;
text-align: center;
padding: 20px;
width: 100%;
height: 100vh;
}

body {
margin: 0;
}

.topnav {
overflow: hidden;
background-color: #333;

}
#navbar {
position: top;
} **

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 8.1.0; SAMSUNG SM-P585) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/13.2 Chrome/83.0.4103.106 Safari/537.36.

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

2

Padding adds to the height of an element, so your welcome section is 100vh + 40px in height.

You can either remove the padding, or use calc:

#welcome-section {
    height:calc(100vh - 40px);
}
3

ah perfect! I removed the padding and now it passes the test. Thank you so much.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.