Using CSS3 Media Queries for a Responsive WordPress Design

Using CSS3 Media Queries for a Responsive WordPress Design

A responsive design for your WordPress site is no longer optional – it’s a necessity. At least, it is according to Google’s updated algorithm, which penalizes site’s that aren’t fully optimized for mobile devices.

And Google’s algorithm update makes sense. According to comScore, mobile has become the leading digital platform, with total activity on smartphones and tablets accounting for 60% of digital media time spent in the US.

Using CSS3, you can update your site to make it responsive. Unlike other methods, such as Bootstrap, CSS3 is less complicated and a lot easier to learn and implement, but since there’s also CSS in Bootstrap, it’s great styling language to learn or brush up on for both beginners and pros.

In this post, we’ll go through the steps you need to take to make your website responsive with CSS3. Continue reading, or jump ahead using these links:

Responsive vs Mobile-Friendly

The terms “responsive” and “mobile-friendly” are often used interchangeably when describing a site, but it’s important to understand what both words really mean to ensure your site meets the necessary requirements needed to look great across all devices.

Sure enough, a responsive design is different from a mobile-friendly design by definition.

A fully responsive design fits perfectly on a smaller screen and has icons, images and other elements that are sized so they’re easy to see and use when you tap on them.

Slack's mobile site.
A responsive site can view content comfortably on a smaller screen.

Mobile-friendly sites, on the other hand, just barely meet the requirements of being viewable on mobile screens. This also means they’re not responsive.

For example, a site can be considered mobile-friendly when you don’t have to scroll left and right to view all the content, but that also means the entire page and its content shrinks to make that happen.

Content becomes illegible unless you pinch the touch screen to make the page and its content bigger.

A mobile-friendly page with tiny text and links.
A site doesn’t have to be user-friendly to be called mobile-friendly.

Sites that aren’t responsive or mobile-friendly display the standard desktop site across all mobile devices.

On smaller screens, you would need to scroll left and right to read all the content on the page since it doesn’t all fit on the screen. These types of sites are difficult to use on mobile devices.

A site that's not responsive.
Sites that aren’t even mobile-friendly aren’t user-friendly at all.

Ideally, you want your site to be responsive and not just mobile-friendly. Luckily, CSS3 includes the @media rule, which has the tools to help you create a theme and site content that are fully responsive.

What Is the @media Rule?

To make your WordPress site responsive with CSS, you need to use the @media rule. You would use it in much the same way you would with regular styling with curly brackets, except this property encloses around other styles such as in this example:

With this structure, the enclosed elements take on the rules set by @media. You can define the type of media to display, such as phones and tablets, printers or screen readers. Once you choose a media type, you can then set their values in terms of sizing with an expression.

With this CSS rule, it can tell a browser to display specific content depending on what device is being used to view your site. This means you can create a desktop – or full – version of your site along with a whole other style that views well on smaller phone screens and tablets that visitors who are using those devices can see.

Your responsive site would be compatible with all major browsers and would be comfortably viewable for everyone.

In fact, all the major browsers have been able to display the @media rule for quite some time. Here’s a breakdown of the first versions of each browser that support it:

  • Chrome – 21.0
  • Safari – 4.0
  • Firefox – 3.5
  • Edge – 12.0
  • Internet Explorer – 9.0
  • Opera – 9.0

Because browsers continually evolve and release newer versions, support for the @media feature might change. You can check MDN for updated browser compatibility table.

There’s so much you can do with CSS when creating a responsive site and it starts with choosing the type of media that you want to be responsive.

Defining Different Screens

First thing’s first: Start by backing up your style.css file for safe keeping in case you make a mistake and need to restore your original version. Once you have the file open and after you type in @media, you need to add the media type right next to it.

If you decide not to add anything, then it defaults to all screen types or the specific size you outline in the next step. You can use all as well.

Here are the other options you have for media types:

  • screen – You can use this for any screen from mobile phones and tablets to laptops and desktops.
  • print – This one’s used for printers. You can create a printer-friendly version of a page with this type of media.
  • speech – This media type is used for screen readers that analyze a page and read the text content out loud for those who are visually impaired.

Before the media type, you can also enter not to display a style for any screen that isn’t the media type you enter or only to display styling for only the media type you define. If you use either of these, you do need to also add a media type since this won’t be optional any longer.

With all this in mind, so far you can type something that looks similar to this:

Styling for Screen Sizes

Next up, you can get more specific and define the screen sizes that are required in order to apply the styles you enter later on. After the media type, enter and, then follow it with an expression. If you use multiple expressions, they should all be separated with and as well.

In this case, an expression is used to add media features such as sizing and they are entered in between parentheses. When you’re done adding the expressions, type your curly brackets and add your CSS to style your design for the media type you defined.

Here’s what it looks like when it’s all put together:

In this example, I used a max-width of 1024 pixels. This means I set the maximum width to the size of an iPad screen. This is also how you can use an expression to define a specific size of a screen.

Why would you want to do this exactly? When you use any of the following as expressions, you can control how different mobile devices view your site’s design and content:

  • max-width – The maximum size of the media type’s screen width that’s allowed in order to display the styles that are set within the @media rule. Anything larger and the styles won’t displayed.
  • min-width – This is the opposite of the above. It sets the minimum size of the media type’s screen width. Anything smaller and the styles won’t be displayed.
  • max-height – This sets the maximum height a media type’s screen is allowed to have in order for the enclosed styles to be displayed.
  • min-height – You can set a minimum height for a screen. If a screen is the same or larger than the amount you entered, the enclosed styles are displayed on the device.

Typically, the widths are usually set and you can leave out the height unless you have a specific style that requires it. Keep in mind that all devices are meant to scroll up and down to view all the content on the page and this is precisely why it’s usually not used.

Once you know the width of the different screen sizes for mobile devices, you can easily style your theme and content to display well for the specific devices you choose.

Here is a chart with some common screen sizes for device resolutions. You can view them by different platforms — desktop, tablet, mobile, or all.

If you use these screen widths for your screen media type, you’re on the right track to making your site look great across all devices.

There’s a whole treasure trove of other expressions and media features you can use. For example, you could also define the resolution, color ratio and color index for your media types, to name only a few.

Here’s an example of what these media features could look like to give you a better idea of how you could use them:

In this example, to display the content’s style the screen size must be at least 1920 pixels wide with a minimum aspect ratio of 16:9 for the device. Simply put, this code is perfect for displaying styles that are only for TVs and large desktop screens, which is great for showing high definition videos.

To see a full list of all the available ones, check out w3Schools and Mozilla’s developer site.

Testing Your Site for Responsiveness

When you’re done, it’s important to test out what you created to make sure it really does work across multiple or all screen sizes. If you have those devices handy, you can easily fire it up and test it out, but this can be difficult if you don’t have them all handy.

Luckily, there are many ways to test out your styles and site to make sure it’s suitable.

You can use the Window Resizer Chrome browser extension, ResponsiveResize or ResizeMe Safari extensions and Fire Resizer or Window Resizer for Firefox.

windows resizer for chrome browser
Adding a resizing extension to your browser is a handy way to test your site’s responsiveness.

There are also many online mobile device emulators that you can use for free. Here are a couple solid offerings.

Lambda Test

Lambda is a highly popular (1 million+ users) and extremely high quality testing platform. It allows live-interactive browser testing, real device app testing, 120+ app integrations―and it’s ultra fast.

LambdaTest.com
Lambda Test

They offer a free tier, which imposes some limits (number of tests, amount of time per month), as well as two additional pay-per-month tiers, which add incrementally more time and features.

Responsive Test Tool

This site does a decent job of testing a site’s responsiveness. You can toggle the sample screen to a large number of pre-defined sizes from the dropdown menu bar at top, or input any dimensions for a custom screen size.

responsive test tool dot com
Responsive Test Tool.

The Responsive Test Tool website is free to use.

Google’s Mobile-Friendly Test

After you have tested your site and you’re satisfied it looks great across devices, there’s one more test you can try and it’s an important one: Google’s Mobile-Friendly Test.

googles mobile friendly test
Google’s Mobile-Friendly Test gives you a fairly detailed report of your site.

All you need to do is enter the URL of your site and this tool displays a report and a displays a pass/fail score. If you pass the test, your site won’t be penalized by Google’s algorithm and may even give you a boost in your ranking.

You’re All Set to Get Responsive

Ensuring your site is responsive is essential as more and more people access the web on a growing number of devices with different screen resolutions.

If you would like more CSS3 inspiration, check out Media Queries, a showcase of responsive website designs.

With all the tools and information in this article, you should have everything you need to make your site responsive with CSS3. Once you’re done, you can also test your site just to be sure you meet the requirements for responsiveness.

For more CSS tutorials to customize your site to the hilt, check out some of our other posts: Adding Social Media Icons to WordPress with CSS Sprites, Adding Custom Fonts to WordPress with @font-face and CSS3 and Make Your Images Pop with Super Easy and Sexy CSS Styling.

Editor’s Note: This post has been updated for accuracy and relevancy.
[Originally Published: November 2015 / Revised: February 2022]

Have you been able to create a responsive site with this tutorial? What are your goals for a responsive site? Share your thoughts in the comments below.
Tags:
James Farmer
James Farmer CEO of Incsub, WPMU DEV, CampusPress & Edublogs
Janette Burhans
Janette Burhans Janette is a wily wordsmith and impassioned illustrator who does her best work surrounded by pink, sparkly things. Aside from creating articles and art, she treasures time with family (human & furry), reading or watching stories, and long walks down the makeup aisle. She is happy to share her thoughts and feelings, but draws the line at ice cream.