Now we'll be using CSS Flexbox to change a holy grail layout into a responsive holy grail layout. You should be able to complete this using ONLY the CSS file, but... use whatever tools you like. As long as one of those tools is media queries!
You shouldn't be! You are, after all, a little more familiar with it. But if you'd rather, you can always switch to the Grid version of this challenge.
This is a fork-and-clone situation. Go do that thing!
You have as resources:
- A holy grail layout. Your desktop layout is done!
- Screenshots in
assetsfor a tablet layout and a mobile layout. Check them out!
It doesn't have to be pixel-perfect, but implement the following two layouts:
- A mobile layout that takes effect if the screen is below 700 pixes wide.
- A tablet layout that takes effect if the screen is bigger than the mobile layout but below 1100 pixels wide.
Remember: The goal here is to practice your media queries and Flexbox, NOT to work on your pixel-perfect heights and widths!
But Batman doesn't need luck.