Mobile first Breakpoints
Instructions
- Do one of the following
- Take one of the pages that you have previously made and refactor it to use media queries
- Create a new page layout using the flexbox and media queries that we worked with today
- Decide on whether you want to serve a mobile or desktop layout at the default, then create a media query for the other one
- set this by using min-width or max-width
- In the readings for today, there is a freecodecamp article that has some great suggestions for breakpoints if you want to get really specific
- make a design that has a distinct layout between mobile and desktop screen sizes
- at mobile
- content should be in a single column (much of this can be done with flexbox on it's own)
- at desktop
- More content can be displayed beside other content
- for some displays, you will need to use media queries to make some content disappear, and other content to use different flex properties
