It's time to expand our skills into mobile devices. You will be creating a fully responsive version of the desktop that you have been building all week. You will be working through design mock ups for desktop, tablet, and mobile devices located in the design-files folder.
- Fork / Clone this project into a directory on your machine.
- Open the code with your preferred integrated development environment (IDE).
- Start on the objectives
- Constrain your container class with a
max-widthof 880px - Introduce max-width media queries into your project at 768px and 400px.
- Review each design file and build your styles at each breakpoint.
- Convert all fixed widths, left and right margins and paddings throughout the site into percents. You will know this is working if you never see a horizontal scroll bar when you resize your browser.
- Introduce
font-size: 62.5%;into yourhtmlselector. - Convert all font-size pixels into rem units
- Do your best to make the breakpoints look pixel-close-enough
- Build the services page from earlier assignments into a responsive design using your own creativity
- 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. I recommend making a copy of all your contents in a new folder named "min-width" to keep it separate