Personal Portfolio: welcome/viewport sizing and excess padding


I’ve been working on finishing the last responsive web design project for my personal portfolio. I was having issues with getting layout test 2 to pass ( ‘The height of the welcome section should be equal to the height of the viewport’). I wasn’t able to find the lesson that would have covered manipulating the viewport (I’m guessing I overlooked it) so I reviewed a few different example projects. After adding ‘height: 100vh’ to the css for the welcome section I was able to get the test to pass. However, I’m now getting a large amount of padding around the welcome section, making the page look odd. Here is the link for the project on my codepen:

Responsive Web Design-Personal Portfolio

I wanted to see if anyone could direct me to the lesson that would have covered viewport formatting and if they can help me figure out the reason for the odd, extra padding.


In my point of view, consider those projects as exams to pass only, soon you will never work with pure annoying css, lots of auto-responsive frameworks existed already: like w3.css, bootstrap ect… they offer automatic responsive web design. Right-know keep following the cursus and power your self with w3schools and sololearn.
But for the sake of your question, how about to manipulate welcome section with margin-top and margin-bottom, padding-top and padding-bottom, play around until you find the correct measures. I am sure you got my point.

i completely see where you are coming from. most real projects will have bootstrap to some other styling built in to do most of the heavy lifting. at the same time, its not fool proof as at my QA job, i’ve seen plenty of UI issues caused by dev ignoring css entirely and assuming the framework will take care of all the issues. i’m not going to crazy and above and beyond on these projects but still want them to be somewhat presentable.

i’ll play around with margins and padding and see where that takes me.

After looking over this assignment and some examples, I realized the large amount of padding around the welcome section is actually intended. it’s like a billboard a person sees as soon as they arrive at the website. not how i’d style it but not my requirement.