INTRODUCTION TO
RESPONSIVE CSS MEDIA QUERIES 
in WORDPRESS
with examples & demo

What are media queries in WordPress, what are they used for and how do you use them? The answers are here.

This article is for everyone with fears like those of one of my favourite clients.

Recently she asked us to add a few CSS rules to display a page nicely on mobiles.

Now, she's pretty comfortable editing CSS here and there when she needs to.

But there's a limit to her willingness to experiment.

That willingness ends if she has to deal with the smaller displays of mobiles, tablets or laptops. She refuses to even try things out.

For her, wrapping her head around media queries in WordPress is a no-go area.

This article should help her.

What is responsiveness?

A responsive website means the layout of the site responds to the device used to view it; the website adjusts according to the display size.

For example, images shown on a desktop browser will display in dimensions far too big for a mobile phone. If the design is responsive, the image will adjust to fit into the smaller mobile display.

Here is a responsive design (from this site) on desktop, tablet and on mobile.  You'll notice the layout adjusts as the screen size changes; text is still clearly readable and images are clear.

Deskt​op

Tablet

Mobile

Here is the same web page with a non-responsive design (I removed some of the CSS media queries) on mobile.  As you can see the images and text are all very small and would need lots of pinching to zoom in.


Some Definitions

When we talk about display we mean the screen you are looking at.
Mobile means any mobile device, including laptops and tablets.

Responsiveness is NOT the same as mobile friendly.

A mobile friendly site means that the site is the same on mobile displays as on desktop. Images and text will shrink to fit onto the small mobile display. In practice this usually means that text is tiny and you need to pinch and zoom to read the site.

So, its reasonable to assume that responsive is preferable to mobile friendly.

Question: Why is responsiveness so important?

Answer: Display size statistics

Not too many years ago many website owners decided not to make their WP website responsive. They opted NOT to spend the extra time and effort needed.

That’s not an option any more. 

Depending on the source, the most common display resolution nowadays (and for the past 6 years or so) is 1366x768 for desktop/laptop and 360x640 for smaller mobile devices.

According to Statcounter, this is the current situation:

statcounter display resolution stats

At the time of writing, Statcounter was unable to give me a chart using data from the past 5 years but the trend would be something like this:

D:\Users\soc\Downloads\display size trend 2012 - 2018


Ok, maybe not as dramatic as that but you get the drift. My point is that you should note the rise and now dominance of smaller screens, representing mobile devices.

Hence the importance of media queries in WordPress. QED.

What is CSS?

The main programming languages used to construct and display your WordPress website are:

PHP (originally it meant Personal Home Page but it now stands for PHP: Hypertext Processor - don’t ask about recursive acronyms),

HTML (Hypertext Markup Language) and

CSS (Cascading Style Sheets), most likely with a smattering of

Javascript thrown in there.

In a nutshell:

  • PHP builds the HTML of the webpage displayed in your browser
  • CSS determines how to display these HTML elements

Using CSS is known as styling. It's used to select colours, sizes, positioning and, increasingly, some functionality like animations. Javascript then adds extra functionality to the mix.

Since CSS deals with the styling and display of the webpage, it makes sense that it's also used to make sure a site responds to the current display size i.e. responsiveness.

What are media queries in WordPress?

(Media queries can be used in languages other than CSS, such as JS but for simplicity here we’ll only deal with the CSS media queries using the at-rule @media and only with those queries dealing with display size.)

@media in a nutshell

Take a look in one of your WordPress theme's CSS files, often named styles.css, and you’ll see the code that determines how your website page is styled.

As a trivial example, let's enter the following code at the bottom of the file:

/* Set the paragraph background color to grey */
p {
 background-color: grey;
}

Save the file and upload it back to your server. You can see this is styling the font colour of the website page.

How to find and open your CSS file

In a standard WordPress install your CSS file will be in one of these places


/wp-content/themes/<YOURTHEMENAME>/styles.css 

/wp-content/themes/<YOURTHEMENAME>/CSS/XXX.css


Use the instructions for FTP ing to your site in this post to get to it.

To make this responsive we could add these media queries AFTER the above rule

/* On screens that are 100px or more, set the colour to reddish */
@media only screen and (min-width: 100px) {

   p{
      background-color: palevioletred;

     }
}

/* On screens that are 992px or more, set the colour to blueish */
@media only screen and (min-width: 992px) {

   p{
      background-color: cyan;
     }
}

Resize your desktop browser for a demo

I've programmed the above CSS into the above page section so to see it in action, just resize your browser window.

If you're on a mobile device you should see a pale violet background above.  If not you'll see a cyan background.

The most important thing to note with all of this is that the order of your media queries matters!  Note how the first rule applies only until the display width is up to 992px.  After that the second, most recent rule applies.

If the above two @media queries were reversed, they wouldn't have the desired effect.  Targetting max-width instead of min-width would also make a difference.  It can get tricky so you'll need to play with it, tweak it until you get it right.

Obviously this is a trivial example.  This article should serve only as an introduction and I'm not going to rewrite any of the already useful tutorials already out there. You can learn more about how to do it at many places like W3Schools or here.

NOTE

It’s generally accepted nowadays that we all scroll up and down on our mobile devices. For this reason you’ll rarely see a media query addressing the Height of an element.

How to avoid writing @media queries

You can’t avoid using media queries. Nor should you try. Unless you want to alienate a huge section of your website visitors. (See the statistics above.)

But here's what you can do: you can build your WordPress website using a responsive theme.

It's the simplest way to avoid dealing with all the possible media queries in WordPress.  The theme authors have built all these queries in so it's responsive out of the box.

There are plenty of these themes and they take all the heavy work of dealing with different display sizes. There is really no excuse nowadays to ignore responsiveness.

Recommendation

My recommendation is to use a popular theme with good reviews.  My own favourite is one of the Thrive themes which you can get here.

How to do it yourself

Even with a great, responsive theme you might need to add some CSS media queries in WordPress by yourself.  You might need to tweak some section of your website's display for a particular screen size.  Every site is unique so this situation is bound to come up.

The simplest way to add CSS code to your WordPress website is to use the WordPress Customiser (or Customizer).

Adding media queries using WordPress Customiser: Step by Step

1. Log into your WordPress dashboard

2. Go to any page of your website and click the Customise (or Customize) menu at the top.

WordPress customise menu

You'll see something like this

Wordpress Customise menu CSS

3. Click Additional CSS and scroll to the bottom of the window to enter your custom media queries.

As I said, you'll have to play around with it until you get the result you're after.

Depending on your theme, you may also be able to add media queries in the theme settings.  From your WordPress dashboard, check if your theme has a menu on the left and see if there is somewhere to enter custom CSS there.  ​

You can also edit your CSS file using FTP and add your custom media queries there.  See this post for how to edit your theme's CSS file.

How to test your custom media queries in WordPress

First, you can obviously test on your current machine.

On a desktop, you can resize your browser down to smaller sizes to see when your queries kick in, for example, when the navigation menu disappears and a hamburger menu appears instead at smaller sizes, or like our demo above.

Using Chrome's developer tools (hit F12) you can click the mobile emulator button and get a rough idea of what you're site will look like on a mobile device.  Here you can also resize the screen to see your media queries taking effect (or not).

chrome dev tools mobile emulator

Opera, Safari, Mozilla's Firefox and Microsoft's Edge browsers all have similar functionality.

Next, use your physical devices.  Your mobile, whatever it's display size, will give you valuable "real-world" feedback that the browser might not pick up.

Last year I met a WordPress designer who takes this to a whole new level; she actually goes to a mobile phone shop and tests her designs on as many devices as she can before they throw her out.  No joke!

Browser plugins to test mobile responsiveness

I haven't tried all of these but Chrome has some extensions that might prove useful:

Mobile/Responsive Web Design Tester

Emm:et Review

Viewport Resizer

For Firefox you can try toggle REsponsive and other browsers probably have something similar.

Websites to test mobile responsiveness

There's a host of online tools to test your website's responsiveness ...

All of the above can help you test your WordPress website for responsiveness but keep in mind the only true test is viewing the website on a real mobile device.

The main uses of responsive WordPress website design

Images

About 70% of the average web page data is composed of images.  It makes sense that a big focus of any responsive design will be ensuring images display nicely.  Responsiveness can ensure they aren't cropped on smaller displays or stretched to a size that looks grainy on larger displays.

Navigation

It's common convention nowadays to hide a list of navigation items, i.e. a menu, on smaller displays. Instead a single discrete menu button is usually shown on mobile devices.

Columns/Tables

Converting multi column layouts to a single column on a mobile device by setting breakpoints of common display sizes is very common.  Tables too need to be displayed differently on smaller screens so that horizontal scrolling can be avoided.

Apps layout

Any mobile app will need to carefully deal with the various widths of mobile devices.

Orientation

Another convention: changing from landscape orientation on larger displays (like desktops) to portrait orientation on smaller displays.

Troubleshooting your media queries in WordPress 

By far the most common reason your media queries in WordPress don’t work as expected is their position in the .css file.

Your media query code must come AFTER the default CSS for the particular HTML element you're trying to target.

Like all CSS, the most recent instruction is what takes precedence. (The only exception here is if the !important directive is used.  This will ensure this rule takes precedence over any that follow it.)

The trickiest part is in the order of the media queries themselves: if you use min-width then the order of the different media queries will be different than if you use max-width

E.g. consider these two media queries

@media only screen and (min-width: 667) {p{color:blue;}} /* wider than 667px and smaller than 992px because 992px comes next and takes precedence */
@media only screen and (min-width: 992px) {p{color:red;}} /* wider than 992px */

This will make text blue on the smaller display and red on the larger display.

@media only screen and (max-width: 992px) {p{color:red;}} /* narrower than 992px and wider than 667px */
@media only screen and (max-width: 667px) {p{color:blue;}} /* narrower than 667px */

This will make text blue on the smaller display and red on the larger display.

Think about these examples, they make sense 🙂  (It took me ages to check that they do!)

Once you understand the differences in these examples you're on your way ...

Conclusion

Now you know more than most about using media queries in WordPress.  Get out there and start using them and see what new possibilities you discover for your website.

If there are any better examples you'd like to see here, just let me know in the comments.

Sources

https://www.rapidtables.com/web/dev/screen-resolution-statistics.html

https://en.wikipedia.org/wiki/Display_resolution#Common_display_resolutions

https://techcrunch.com/2012/04/11/move-over-1024x768-the-most-popular-screen-resolution-on-the-web-is-now-1366x768/

https://www.w3schools.com/browsers/browsers_display.asp

https://techtalk.pcpitstop.com/2017/01/16/pc-monitor-display-size/

https://en.wikipedia.org/wiki/Display_resolution#Current_standards

https://premium.wpmudev.org/blog/responsive-design-css3/

https://www.xfive.co/blog/5-challenges-of-responsive-development-and-how-to-solve-them/

https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

  • by Seán
  • |
  • May 28, 2018
Click Here to Leave a Comment Below

Leave a Comment: