Responsive Design, Viewports and Media Queries

It seems that even after many people understand how to override theme CSS by utilizing their developer tools to determine what needs to go in their child theme stylesheet, I still get the following question quite often.

Now, where can I edit the mobile styles of the theme?

And the secret is, you’re already doing it!

Everything in your child theme’s stylesheet is affecting your website, no matter the device. So, if you’re making CSS customizations, it’s your responsibility to account for how your styles affect desktop, tablet, and mobile.

This may seem like a daunting task, but hopefully in this article, we can start to put this all into perspective.

The Viewport

When people view your website, they can be doing it from any number of physical devices. If you get caught up trying to appease every specific device, you’ll go crazy.

So with modern responsive design practices in mind, we try not to dwell on how our websites look across each, individual device. But instead, we style our website, based the size of browser viewing the website. We refer to this area as the viewport.

Within your custom styles, you can target all viewport sizes, or you can target specific viewport size ranges. And generally, we specify these viewport ranges in pixels.

And as discussed in this advanced tip, by detaching your developer tools into a separate window, you can do all of these responsive style customizations right from the web browser on your desktop.

Want a general idea of how your site looks on mobile and what styles are affecting it? Scale your browser window down and check it out, while you’re working with your developer tools. And of course, as you get closer to going live with your shiny, new website, then you can whip out your iPhone or Android device, to get a more accurate preview.

Viewport Ranges

Now, what viewport size ranges should we actually be targeting? What is considered to be suitable range for desktops? Tablets? Mobile? — If you were creating a website from scratch, this is where things might get tricky. And if you research this topic, you’ll find a wide variety of answers.

Luckily, within in our framework, this is already determined for you. We try to be as consistent, as possible, in how we style things for different viewport ranges. We do this by sticking to a set of ranges, set by Bootstrap, a frontend framework we incorporate into our WordPress themes.

I’m not saying these are the ultimate ranges, that should be used for all websites. This will always be up for discussion and will be constantly evolving. However, these are the general ranges we try to use, in most cases, within your Theme Blvd theme.

Media Queries

And that brings us to the point of all this. Within our CSS, we can target specific viewport ranges using media queries.

How They Work

If I have a couple of CSS rules out in the open, like the following, this is simply generic styling that will be applied to all viewport sizes.

.foo {
	background: #000;
	color: #fff;
}
.bar {
	background: #fff;
	color: #000;
}

But if I take that block of CSS and wrap it in a media query, I can apply it to a specific viewport range.

@media (max-width: 767px) {
	.foo {
		background: #000;
		color: #fff;
	}
	.bar {
		background: #fff;
		color: #000;
	}
}

Note: Remember to keep good CSS formatting practices, in mind, so you don’t lose track when each media query is open or closed.

Min-Width and Max-Width

As you dive more into CSS, you’ll find that media queries can be used for a ton of cool things. But for what we’re working with here, we’re mainly just concerned with min-width and max-width.

And I think one of the most confusing parts for beginners is the difference between min-width and max-width, used within a media query. It’s one of those simple things that may take a few minutes to click in your brain, but once it does, you’ve got it.

Simply put, min-width specifies a minimum viewport width to target. So, for example, the following statement says to target viewports, 768px and above.

@media (min-width: 768px) {
	/* Target 768px and above */
}

And alternatively, max-width specifies a maximum viewport width to target. So, for example, the following statement says to target viewports, 767px and below.

@media (max-width: 767px) {
	/* Target 767px and below */
}

What Overrides What

Also remember our rules of order, to know what overrides what. Consider the following example.

.foo {
	padding: 50px;
}
@media (max-width: 991px) {
	.foo {
		padding: 30px;
	}
}
@media (max-width: 767px) {
	.foo {
		padding: 20px;
	}
}

In the above example, first we’ve applied 50px of padding to the .foo element everywhere. But then next, we specified a rule to make the padding less. Keeping with the basic rules of CSS order, we know that the latter statement overrides the former. However, we wrapped that second rule in a media query, applying it to only viewport sizes, 991px or less. And then our third rule overrides the previous two, but only for 767px or less.

So, the result is that the .foo element will have 50px of padding on desktops, 30px on tablets, and 20px of padding on mobile devices.

Examples

So keeping in mind the theme’s general suggested viewport ranges, let’s list some CSS snippets to get you started from your child theme’s stylesheet.

Small Desktops and Below

The following CSS will be applied to the viewport range 0 - 1199px. This includes small desktops, and smaller.

@media (max-width: 1199px) {
	/* Target 1199px and below */
}

Tablets and Below

The following CSS will be applied to the viewport range 0 - 991px. This includes tablets, and smaller.

@media (max-width: 991px) {
	/* Target 991px and below */
}

Mobile Devices

The following CSS will be applied to the viewport range 0 - 767px. This includes mobile devices only.

@media (max-width: 767px) {
	/* Target 767px and below */
}

Tablets and Above

The following CSS will be applied to the viewport 768px and above. This includes tablets, and larger.

@media (min-width: 768px) {
	/* Target 768px and above */
}

Small Desktops and Above

The following CSS will be applied to the viewport 992px and above. This includes small desktops, and larger.

@media (min-width: 992px) {
	/* Target 992px and above */
}