Height of the welcome section should be equal to the height of the viewport

Height of the welcome section should be equal to the height of the viewport
0

#1

Tell us what’s happening:

I am currently trying to build a personal portfolio and am trying to pass all tests before doing any stylization. I have passed all tests except " The height of the welcome section should be equal to the height of the viewport. " I have now spent two days trying to figure out what im doing wrong but i cannot figure it out. Any suggestions?
Your code so far

html, body{
text-align:right;
height:100%;
width:100%;
}
nav ul li{
list-style:none;
text-align:right;
display:inline-block;
margin:10px;
margin-top:20px;
margin-bottom:15em;
}
 
#navbar{
position:fixed;
top:0;
width:100%;
}

a{
text-decoration: none;
}

#welcome-section{
text-align:center;
margin-bottom:40em;
height:100%;
min-height:100px;
margin-top:30em;
}
#projects{
text-align:center;
}
img{
width:170px;
height:100%;
}
#profile-link{
display:inline-block;
overflow:hidden;
  text-decoration: none;
margin:50px;
}
@media (max-height: 100%)
{
 #welcome-section
{
  
  }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage


#2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

@Harrisonkay - Looking at the code you have you’re using a percentage for the height value. I would recommend taking a look at the vh property to set the height of your welcome section.

https://www.w3schools.com/cssref/css_units.asp

Hope that helps.


#4

Hi.

I’m having trouble with this as well. Using the vh property hasn’t helped me pass this test.

I’d appreciate any help.


#5

I’ll take a look now and update this post when I see something.

Edit: Solved.

In your CSS add these lines to the welcome-text section (at the bottom of the section to over-write your older code)

  padding-top: 0px;
  margin-top: 0px;
  display: block;
  height: 100vh;

Then click on the gear icon in the HTML section and add the viewport meta definition (there’s a handy link on the page that lets you do it in one click).

Re-run the test.
Done.


#6

Hi there.

I see now where I went wrong. I applied vh to font-size instead of height. I clicked on the HTML gear icon and added the viewport meta definition. I re-ran the test and it passed. Fantastic!

Thanks for your help; it’s appreciated!