jackmallahan / responsive-rescue

An exercise in refactoring

title	length	tags
Responsive Rescue		front-end

Goals

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.

Overview of Exercise

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.

Let's get started!

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.