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

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.

10 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

It worked thank you soo much.

1 Like

OMG Thank you this helped me!!

1 Like

Thank you for your awesome point-out. Made me realise I had padding-top applied. Once I removed it I passed :slight_smile:

1 Like

Thanks… It helps a lot :slight_smile:

1 Like

Thanks…Your reply helped me

1 Like