We will be using the same codebase for Responsive Web Design I and II modules. You have been provided design mock ups for desktop, tablet, and mobile devices located in the design-files folder.
For project 1 you will build an adaptive website that has max-width breakpoints at 400px and 768px based on the designs provided to you in this repository. You have been provided desktop styles so you can focus on your media queries.
Concepts required to complete the task:
- How to use min and max-width
- Media queries using max-width
- Flexbox layout techniques are preferred
Remember that an adaptive layout updates at breakpoints only. Don't worry about fluid layouts for this challenge.
Tasks to complete:
-
Introduce max-width media queries into your project at 400px, 768px.
-
Review each design file and adjust your styles at each breakpoint. Hint: Change your container class to width: 100% at the 768px breakpoint.
-
No horizontal scroll bars are acceptable at the exact breakpoint. At 400px and 768px you should only see a vertical scrollbar. Everything else is fine to have a horizontal scroll bar as this is not fully responsive.
-
Stretch Goal: Once you have completed the project with max-width media queries, start over with min-width media queries to get a feel for how a mobile first approach would be like.
Now that you have introduced media queries into your project, it's time to upgrade your adaptive site to a full on responsive layout.
To accomplish this challenge you will need to incorporate your knowedges of max and min width, media queries, rem units, and percents.
Tasks to complete:
-
Convert all fixed widths into percents.
-
Convert all left and right margins and paddings into percents.
-
Convert all font-size pixels into rem units.
-
Stretch Goal: See how close you can get to the media query and still have your site look decent. Hint: you may need to introduce a few more media queries!