Responsive Web Design Fundamentals >> Lesson 4 >> Common Responsive Patterns >> Project Update Part 2
Here is an outline of how to approach this project update:
- Create NEW .css page, responsive.css. All the work of this project will be done in this file.
- Move the icons into a “hidden on the side” dropdown hamburger icon when screen size gets too small. When hamburger icon is clicked, move the dropdown into the screen.
- When the screen size gets to the right size, expand the icons back out and get ride of the hamburger icon/dropdown.
- As screen gets bigger to 550px, what can you do to the column flow to make the content look better? Maybe stack 2 elements within one row, like this:
- Breakpoint at 850px, add margins to center content rather than continue stretching it horizontally.
- Reorder column flow (hero element, scores, weather)