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

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:


1 Like

@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.

3 Likes

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.

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.

24 Likes

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!

1 Like

you have all my love…wow i faced a similar problem until i applied your fix, thanks so much and keep commenting solutions to people’s problem. You 'preciated :blush::+1:

1 Like

Thank you very much :slightly_smiling_face: It help me too!!!

Thank you , it worked for me as well :slight_smile:

Can you please elaborate “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).”?

I don’t understand what meta definition you’re talking about. Thanks

Meta tag is what i was referring to. It is a tag that describes the virtual viewport size and gives other rendering information.
Here is a great explanation which is a bit long but i wish i had read it a long time ago.

1 Like

It helped me as well. Thank you guys!

I just wanted to add that I was having trouble with this issue even though my #welcome-section’s height was already set to 100vh. It turned out that the problem was that I had a 1 px border, and that was throwing the test off. Once I commented out the border, I passed the test.

8 Likes

Thanks @gunderodd , really helped out! Had the same problem, with the border.

Thank you so much for posting this as well as the link that explains viewports. So helpful.

1 Like

tx you man !! had the same problem too with a little border-bottom …
but still not sure to understand the why of this behavior :roll_eyes:

Hello
I am having the same issue : https://codepen.io/melanie_almeida/pen/gObEEwZ

I will kindly appreciate your help

I also have read the documentation about viewport but still don’t get what is it and how to calculate it.

it works …thank you very much…

1 Like

Thanks a lot, same problem for me !!

i am the same ISSUE !!!
even thought that the height of the section is 100vh . still i am not passing the test !! @hbar1st i also used your solution but did not really work out for me !! it causes the navbar display not to fixed and that makes another failure because the navbar should always stay on top of the view port

PLEASE CAN YOU GUYS CHECK IT OUT !!!
https://codepen.io/Dani-997/pen/pojRJmG?editors=0100

Apply left:0 and top:0 to the navbar element as shown below:

#navbar {
    position: fixed;
    background-color: goldenrod;
    top:0;
    left:0;
   
}
2 Likes