search

sarahsurah / f1-3-c2p1-colmar-academy

0 stars 0 forks source link

Layouts #2

Open tommygebru opened 5 years ago

tommygebru commented 5 years ago

You're layouts are looking top-notch Sarah, nice work starting the mobile layout at 480px Consider expanding the media query to 700px. 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

Also at 800px and less you can see some html components begin to collapse, strained for space. Consider using more responsive units, and being flexible with sizing!

Overall this project is a little more complex so take some time and work through each section one-at-a-time, as you work through your project. 👀

tommygebru commented 5 years ago

There are a few minor tweaks you can make to existing 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 👏