Help - Responsive Web Design Projects #5 - Build a Personal Portfolio Webpage

HTML-CSS
1

Hi,

I am having an issue with this user story for the personal portfolio webpage project for the responsive web design projects:

User Story #10: The height of the welcome section should be equal to the height of the viewport.

I have been watching youtube videos and reading webpages for 2 days trying to solve this last user story in order to pass the final project. I can’t get the welcome section to be the height of the viewport even when using “min-height:100vh”.

Any feedback in helping steer me in the right direction would greatly be appreciated.

This forum will not let me include my code or a link to my codepen.

2

my codepen:
/Ricardo_Hodls/pen/QYpEPE

3

Can you give a full link to your codepen?

4

codepen(dot)io/Ricardo_Hodls/pen/QYpEPE

The forum isn’t letting me post links for security reasons because I am a new user…

5

this is passing

*{box-sizing: border-box;}    

#welcome-section {
        background-color: whitesmoke;
         min-height:100vh; 
     
        border: solid;
   
        
       
      }

the problem is that without setting your box-sizing to border box the height of your section is 100vh PLUS the height of your border so it comes out to more than the monitor height and thus fails the test

1 Like
6

Thanks, Chris for your help! that was what I needed!. I had not learned about box-sizing I guess. Thanks so much.

1 Like
7

without declaring that what happens is that any padding or borders get added on top of your containers dimensions for example a 50px container with 5px of padding an a 2px border is actually 64px tall(2px+5px+50px+5px+2px) with border-box the borders and padding are part of that total 50px.

read this for further details:
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

1 Like
8

Thanks for the link, I am checking it out now.

9

cool beans. keep it up

1 Like