Build a Personal Portfolio Webpage story 10

Tell us what’s happening:

Hi friends,
I just cannot pass the story 10 challenge. Please help

Your code so farhttps://codepen.io/meeramenon07/full/daQzOv

Your browser information:

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

Link to the challenge:

Hi, i come across the same problem. i tried using height:100vh for #welcome-section. so far, in my case, it worked.

After you set the height to 100vh on #welcome-section it will still fail. I actually think you may have found a bug in how the height is being calculated.

Long story short, set the height to 100vh on #welcome-section and then set the box-sizing to border-box and it should pass.

/* Add this at the top of the CSS */
* {
  box-sizing: border-box;
}

Another way you can pass is by removing the overflow on the body and then remove the border on the .introduction class

body {
  overflow-x: hidden;
}


.introduction {
  background-color: RoyalBlue;
  width: 100%;
  /* Remove this border */
/*   border: solid RoyalBlue; */
  display: block;
   
 }
  1. You have incorrect font-family values

You have:

font-family: Arial; sans-serif; 'Open Sans';

Should be:

font-family: 'Open Sans', Arial, sans-serif;
  1. You are missing the closing brace in the media query
@media only screen and (max-width: 500px) {
  nav ul {
    text-align: center;
    
  }

Should be:

@media only screen and (max-width: 500px) {
  nav ul {
    text-align: center;
    
  }
}
  1. You have some duplicate CSS properties if you use the down arrow on the CSS box and then select “Analyze CSS”, it will show you if you have any errors.

Thanks, I passed now. I did not add the border box but removed the overflow : hidden and the border from the body and now seems clean. Thanks for all your correction tips. Really appreciate that. I just need to add my footer and would be all set then

Thanks for the suggestion, I passed now

1 Like