Having trouble with "The height of the welcome section should equal height of viewport"

HTML-CSS
#1

https://codepen.io/macewan-raphiel/pen/gOwZmdQ

On the personal portfolio challenge I am having trouble with one last requirement.
I have specified in the meta data width=device-width

Any help would be appreciated

#2

the welcome section should have a height of 100vh, you have height: 93vh;, it should be set to 100vh

#3

Thankyou for your reply, I have tried this and its not working, I have also tried including the navbar in the calculation.

Eg #navbar{
height: 7vh;
}

#welcome{
height: 93vh;
}
#4

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
#5

100% is not the same as 100vh, did you try giving #welcome-section a height of 100vh?

#7

I have, and I just double checked - still not working.

Thankyou foe helping

#8

I have also tried wrapping the whole thing in a div and giving that div a height of 100vh. Doesn’t seem to be working

#9

It took me a while but I figured out how to make it work.

When I removed the padding from both sections and the border bottom I was able to get it to pass.

#welcome-section{
  text-align: center;
  font-size: 50px;
  background-color: #948f7e;
  height: 100vh;
  width: 100%;

}

#navbar{
  background-color: #7f7e94;
  display:flex;
  width:100%;
  height:30px;
  position:fixed;
  box-shadow: 3px 5px; 
  top:0;
}

I think that extra space with the padding must have affected the test.

1 Like
#10

Thankyou so much! Great thinking!