From the course: Advanced CSS Media Queries

Unlock the full course today

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

Including width in media queries

Including width in media queries - CSS Tutorial

From the course: Advanced CSS Media Queries

Start my 1-month free trial

Including width in media queries

- [Instructor] If you know anything about media queries already, you know them because of width. Width-based media queries are the foundation of responsive design work. There are several ways of managing these types of queries. So, let's take a look at a few of these now. Currently, the example that we've been looking at, has been laid out in a desktop first manner. There are four boxes that are going across the screen horizontally, which works great on a larger screen, but this is probably not going to work so well on a phone. What makes this desktop first? Well, the styles on the page that are not contained in a media query, which is all of them, are for the desktop, not for the tablet or for mobile. So, a tablet screen is smaller than what we see here. So, we can write a media query for a tablet display and another one for phone. And we would write those using max width media queries in a desktop first manner. So, the…

Contents