I’ve been working on personal portfolio project ,but I encounter a problem in setting the height of the welcome section should be equal to the height of the viewport . even I set it to 100vh but i don’t know where is the problem … can anyone help me to figure this out ?
height of the viewport is 100vh
You have so much code and so many divs I wouldn’t know where to start but could it be that all the things in your welcome section with set heights in px are preventing the section from responding to different view heights?
You’re off by a pixel:
It’s the 1px border-bottom of your .s1 (your welcome-section).
To fix it, add box-sizing:border-box to the section. In fact it’s generally a good idea to set that for everything, using the * selector.
1 Like
I tried box-sizing:border-box in his root or html selectors and it didn’t seem to fix it.
Also the course warns against using * selectors because of it’s test suite which confused me somewhat as I like to use box-sizing in that way.
Thank you so much … your solution solve the problem!
You can’t just set box-sizing on a parent element as it is not inherited. You have to set it on the element(s) or explicitly inherit it.
If you want some properties set on all elements using the universal selector is the correct way to do it. But it should still be used sparingly, don’t use it unless it makes sense. Setting the box-sizing on all elements is a perfect use case for the universal selector.
Outside of codepen I would normally use * for my box sizing and padding/margin 0, but the course warns against using it. I thought that putting it in a root or html selector would be as good and basically mean all elements. Luckily I use * but I did think they all worked in a similar way
So * is the only selector that will do that. Good to know. Thanks
Not sure where we warn against using the universal selector but I’m sure it’s just meant as a general rule of thumb. You should not use it unless you have to.
I personally only use it for box-sizing or when debugging using outlines or borders. You should not use it to set values that are inherited and can be set on parent elements. You should not use it because you are too lazy to set the properties on the elements as needed. I would suggest having very few properties set using the universal selector.
Back in the day, it was also considered a performance issue. The selector was seen as being slow. Today, the browser and the systems they run on are much faster. But it is still selecting all elements on the page and that can be a lot of elements, so even though it might not be slow per se, it is still not something you want to do unnecessarily.
They warn about it right at the start of the course, I thought it was related to the fcc test suite but they didn’ t really explain it which is a shame.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.