Hi, I am experiencing an issue with the test checker. My welcome section has a vh of 100 and a width of 100%. But for some reason I can’t make it pass the text. I am using chrome on a laptop to do the work. Here’s my link. https://codepen.io/MissCmcw/pen/YzwJwZv
Ps. I know the code is a bit messy, fully aware. On my laptop it is showing to pass 11/12 tests the only one it’s not passing is the welcome section view height.
Any idea how to fix it?
your welcome section has also some padding, which is added to the height
Hey, thanks for replying. Ya I tried to combat that with specifying padding’s at 0 but it also didn’t work. Any suggestions?
first thing, set the id of the welcome section to "welcome-section" not to "welcome-section welcome", you can give one id only to a element
then, your welcome-section has an height of 100vh plus the 100px of padding
using the inspector you could see this:
the error says the difference is also of those 100px:
The height of #welcome-section is not equal to the height of the viewport : expected 335 to be close to 235
two solutions: remove the padding, or try with calc
it would make it much easier to see what’s going on if you would use only one selector to target the welcome-section, you have various instead, which conflict with each other and you need to keep in mind the precedence rules to know which css property is applied
Thank you. I will try the calc to make it work. I appreciate your help!
Thank you so much for your help! It just went back through and removed a few CSS lines and it worked. Other question though how did you make it show you the pudding thing?
right click on the page, inspect element
Oh thank you! I appreciate all the help!