title | length | tags |
---|---|---|
Responsive Rescue |
front-end |
By the end of this lesson, you will:
- have an understanding of how to refactor an unresponsive layout
- have the skills and understanding to implement media queries and add breakpoints effectively and as needed
- Feel confident that you understand how to control how your site looks on every screen size.
Now that you have a handle on media queries and breakpoints, take a look at the unicorn.html
and unicorn-styles.css
files in this repo. Even though it's build using the basic responsive site we just made as a template, this site is definitely not responsive! We need to make sure our users have access to all this highly critical unicorn information! Consider how you can approach structuring this layout on medium and small screens, and, using media queries, see if you can make the page contents work nicely as you resize the screen.
Clone down this repo, open up unicorn.html
in your browser, and try resizing the screen. Make it small, make it big, play around with it. What happens to the layout? Let's take some time to wireframe our ideas about how we want the site the behave on various screen sizes, and we'll work through implementing those layout adjustments together.