In this exercise we want to create a responsive layout which will adjust depending on whether it is viewed on mobile, table or desktop width screen size.
You can see the expected end result at http://constuctorlabs-rwd.herokuapp.com/. Try adjusting the width of the window to see how the layout changes at different breakpoints.
Also, in the bottom right corner of the example you have a toggle overlay button that will overlay a 12 column grid on top to help you figure out the proportions of columns in the layout in relation to each other.
- Fork repo
- Clone forked repo to local machine
- Use flexbox to make the layout responsive and adjust for different screen widths. You may need add other CSS properties to get your page to look right.
- Follow the mobile-first strategy and create the default layout for mobile devices.
- Once that mobile layout is working, use media queries to create a layout for tablet and then desktop. The media queries have have already been set up for you.
- Once finished, commit your work, push to github and create a pull request.