tommygebru
commented
5 years ago If you want to continue making tweaks to elements to clean up your layouts, this includes reviewing certain elements for their margins, paddings or width size that may affect adjacent elements for each page section
One thing that definitely makes it easier is to help create a visual aide and identify the box model for all the webpage elements.
For example:
*{border: solid 1px orangered ;}
or if you prefer
*{background: rgba(0,0,0,.1);}
I like to use the rgba values because it shows overlapping HTML really well 👏
You're layouts are looking top-notch Amanjit, nice work starting the mobile layout sooner, around 650px. This will implement a mobile layout that will work well for a tablet device with responsive design in mind, and stop the elements from collapsing at lesser viewport widths.
Overall this project is a little more complex, great effort working through each section of your project, and taking advantage of the entire viewport width. Each layout holds up really well, and there are no collapsing elements, you've demonstrated a great understanding of the box-model. 👀