From the course: Learning Responsive Web Design in the Browser

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

A practical approach to responsive web design

A practical approach to responsive web design - WordPress Tutorial

From the course: Learning Responsive Web Design in the Browser

Start my 1-month free trial

A practical approach to responsive web design

- [Voiceover] Following the principles of Mobile First Design, I always design everything in the browser to fit the smallest screen first. Now that we have a layout that looks great on smaller screens, we can start widening the viewport to find out where to place our breakpoints and change the display. This allows us to create unique designs and layouts that suit every possible screen width. The process starts by finding the first breakpoint. So here, you simply widen the viewport until things start looking crappy, which is about somewhere around here. So, maybe 600 pixels. You can see the width up here, and this is starting to look less than ideal. That means it's time to add our first breakpoint. And I'll do that right inside banner.css. Scroll down, and go at media screen and min-width 600 pixels. Now I need to decide what rules I want to target in this new media query. So, if I look a bit closer at my content here, you see we have this section with the class banner that contains…

Contents