Portfolio Help - Showing Main Page as the whole viewport

HTML-CSS
1

It looks like the test is to have the size match exactly, but mine is larger because I think of the navbar and logo. How did you get your portfolio project to pass the viewport requrement?

2

Change this:

* { scroll-behavior: smooth; }

To this:

* { scroll-behavior: smooth;
    padding: 0px;
    margin: 0px;  }

The issue is that by default, most elements have inherent margin/padding. That’s why you need to “normalize” your css by setting the default padding/margin for ALL elements. Also, note that you can use width: 100vw; to set an element’s width to 100% of the viewport. I hope this answered your question.

3

Nope, it did not solve the error. It is still the same. This is the error below:

AssertionError: The height of #welcome-section is not equal to the height of the viewport : expected 991 to equal 851

4

Found your error. You needed to add box-sizing: border-box; to your * selector.

* {
  box-sizing: border-box;
  scroll-behavior: smooth;
  padding: 0;
  margin: 0;
}

By default, the height of divs, navbars, etc. is counted as the content INSIDE the borders of the box. By setting the height of the #welcome-section to 100vh, you set the INSIDE to 100vh, but the browser also adds the height of the border of the #welcome-section. We want 100vh EXACTLY. So, we need to tell the browser to calculate the height as the WHOLE “box” (div, navbar, etc.), not the INSIDE of the box.

5

Yeah, box-sizing: border-box; is your easiest solution.

Notice that the difference between the expected and actual height in your assertion error is exactly equal to the amount of padding you’ve added to the main-section element.

Box-sizing is set to content-box by default which doesn’t calculate the padding and border. It is a pretty common practice to set the default to border-box via

html {
  box-sizing: border-box;
}
*,*:after,*:before {
  box-sizing: inherit;
}

or

*,*:after,*:before {
  box-sizing: border-box;
}

Which both set every element and pseudo-element to border-box the benefit of the former is if you have a component that is designed to work with content-box it is easier to set the box-sizing of the most relevant parent element and have it’s children inherit.

Otherwise you could remove the padding from your main-section.