Having a mobile-friendly site has become more of a necessity than an option. However, while there are multiple ways to create a mobile version of a website, the most practical and beneficial is to use a media query for mobile.
Responsive design and media querying provide solutions for ensuring your website automatically adapts across all devices and screen sizes. They are central and complex topics that will make creating responsive sites much easier once you grasp the concept.
This guide will explain what responsive design is, how it works, and the technology that makes it tick. We’ll also discuss implementing and using responsive media queries for all devices and provide some troubleshooting tips. Let’s get start!
What Is Responsive Design?
When Google first started emphasizing the importance of mobile-friendly sites, the web design community responded in several ways. We saw mobile sites on separate domains with automatic redirection.
There were also specialized mobile WordPress plugins to create smartphone-friendly site versions. Some designers simply ignored what was happening and hoped people would get used to zooming and panning.
However, the preferred and popular solution is ‘responsive design.’ It describes an approach to web design to make websites conform to the device used to access them.
In more technical terms, it means that the size and position of site elements ‘respond’ to the so-called viewport. This is the area a site is visible in, and it is constrain by the device’s size and the browser window used by the device. The goal of responsive design is to make accessing sites as comfortable as possible for visitors without the need for zooming, scrolling, and resizing.
The best way to experience this is to go to a mobile responsive website on a desktop computer and slowly shrink the browser window with your mouse.
How Does Responsive Design Work?
Responsive design is based on a few main principles. The most important of them is using proportionate sizes instead of absolute measures. This means website elements are declare in percentages and other responsive measurements rather than static pixels.
Below is an example of how site element sizes used to be declared:
.content {
width: 780px;
}
Declaring sizes this way resulted in a rigid grid (a grid being the main structure of a website, including header, footer, content, sidebars, etc.). As a result, no matter what size device you used to view a website, it would always look the same, and people on smaller screens had to pan and zoom to see all parts of it.
Today, we have what is called a fluid grid. This uses proportionate measurements and can thus conform to the size of the viewport instead of the other way around. Here’s an example of how that looks in CSS:
.content {
max-width: 68%;
}
Aside from that, responsive design has to take into account different usage patterns of mobile users, especially the use of touch instead of a mouse or trackpad. This makes it necessary to consider hover effects, the shape, size, and positioning of buttons, and other clickable elements such as menu items to make them usable.
What Are CSS Media Queries in Responsive Design?
At the heart of the responsive design is CSS. For the uninitiated, this part is responsible for the styling of a website. While HTML builds the skeleton and JavaScript adds functionality, everything that looks nice is usually CSS: font types, sizes, colors — all of it.
CSS is so central because it determines object sizes (as we have already seen). It’s here that we use our proportionate measures. However, there’s something even more important for making websites look good on mobile: CSS media queries.
Media queries have been around since 2009. They are operators that let you (and other designers and developers) add conditions to your styling. For example, you can tell a browser to apply a color to an element only at a certain screen resolution, orientation (landscape or portrait), or size.
A common use case for this is telling the browser to move the sidebar below the main content once the screen size dips below 600px. We will discuss how to find the right breakpoints and set the right responsive media queries for all devices further below.
Aside from media queries, there are other important CSS considerations. One of the most important is images and, more specifically, making sure they adapt to the space they appear in. Typically, this is achieved by setting their max-width to 100%:
img {
height: auto;
max-width: 100%;
}
For fast-loading images, WordPress developers have developed an awesome solution. Since version 4.4, they have made it, so browsers are automatically served the smallest possible image size via the srcset HTML attribute. This saves bandwidth, which makes everything faster.
How to Use Media Queries for All Devices
Alright, now it’s time to get down to the nitty-gritty. In the following sections, we’ll discuss how to use CSS media queries and provide some use cases to demonstrate what they can do:
- What a Typical Media Query Looks Like
- Where to Place Your Media Queries
- Media Queries for Mobile Devices
- Media Queries for Tablets
- Media Queries for iPads
- Media Queries for Desktop
What a Typical Media Query Looks Like
Before we break down the specific media queries you can use for different devices, it’s important to understand what a typical one looks like. If you look into the style.css file of any top responsive WordPress theme.
It can define conditional styles for different media types or devices. Only screen means that the following rules apply to computer screens, tablets, etc. An alternative is a speech, which would target screen readers.
Everything after and is the condition under which the following CSS is applied. Other options are not and only. These conditionals also allow you to string several conditions together.
In our above example, the query sets a condition for applying the following CSS only to screens and when the screen size moves below 480px. This is typical of a media query for all mobile devices.
Overall, this format is the most common media query you will find in responsive design. It’s also our preferred method.
Note: In media query CSS for all devices, min and max can also be used interchangeably. However, some people prefer to define ranges between screen sizes with min-width and max-width.
There are several other operators you can input. If you’re interested, you can learn all about them here. For now, let’s move on to where to place your media queries.
Troubleshooting Media Queries: Common Problems and How to Fix Them
If you’re completely new to media queries, you might run into a few issues when you first start using them. Let’s take a look at a few of the most common problems you may run into when working with media queries for all devices, as well as how to solve them:
- Media Queries Generally Not Working
- Media Query for Desktop Not Working
- Mobile Media Query Not Working
- Media Queries Generally Not Working
If your media queries aren’t taking effect, the first thing to check is if they are in the right place. As mentioned, they need to be at the end of the stylesheet to overwrite earlier declarations. When they are not in the right order (queries for smaller screens before those for larger screens), this can be a source of error.
If everything is in order, but your styles are still not overwritten, make sure you use the same CSS selectors in your media query that you are trying to override. If the earlier ones are more specific, they can keep overwriting the new selector.
Another possibility is that you have CSS declared inline (meaning directly inside an HTML document instead of the stylesheet). In that case, see if you can remove the inline CSS or force an overwrite with! Important. Also, if an earlier declaration has! Important is already attached to it; this could be why your overwrites don’t work.
Media Query for Desktop Not Working
Although your queries work on mobile devices, you may notice that they don’t work on a desktop computer with a reduced browser window. If this is the case, you might have set a device-specific media query.
It’s important to note that max-device-width and max-width are not the same. The screen size (not viewport size) is the decisive factor for the first media query.
Let’s say the max-device-width is defined as 480px. This means the design will not change in a desktop browser because it has a larger screen, even if its viewport is 480px. However, it will change on an iPhone.
Using max-width will fix this. In fact, using max-width is sufficient for most cases.
Mobile Media Query Not Working
Perhaps you’re dealing with the reverse scenario. If your queries are working in a browser but not on mobile, you might have forgotten to set the viewport and default zoom.
For this, you need to add the following line to your header:
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
This tells the browser to render pages according to the device’s width. Adding it often does the trick for making mobile breakpoints work.
The ascent of mobile phones and tablets has overhauled the entire online landscape. These days, no website can do without responsive design and mobile optimization. However, we recommend using CSS media queries to maximize your site’s responsiveness for all devices.
What Are the Pros and Cons of Responsive Design?
The main advantage of a responsive design approach is that you only need one site. It eliminates the need to run and update separate sites for desktop and mobile users, saving you a lot of hassle. Plus, the technology behind responsive design is widely adopted, so it works for almost anyone regardless of device and browser.
One of the biggest challenges you need to consider with responsive design is adjusting to slower internet connections or mobile devices that don’t connect via Wi-Fi. Also, images need to adjust to the screen size, but they also often make up the bulk of the weight of a page. Therefore, it’s important to optimize them as much as possible.
Which Browsers Support CSS Media Queries?
As we just touched on, responsive design technology is widely adopted and, as such, is supported by most major browsers. However, older versions of Chrome and Safari do not support nested queries, and some of the earliest versions of Internet Explorer and Firefox don’t support them at all.
As discussed in this post, you can use media queries for mobile and other devices by adding a few lines of CSS to your theme’s style.css file. You can define these queries based on common screen sizes and apply conditions for hiding and moving certain elements.
Using media queries is just one of many ways you can optimize your WordPress site for a better mobile and browser experience. We offer Care Plans and white-label solutions that can enhance and elevate your site, whether it’s a single blog or dozens of client sites. Check them out today!
If you enjoyed this article, then you’ll really enjoy the 24/7 WordPress website management and support services has to offer! Partner with the team that offers every aspect of premium WordPress support services.
Our expert engineers have your back from speed optimization services to unlimited website edits, security, 24/7 support. Bring us in as part of your team to make your site Bufftastic! Check out our plans.
