Responsive breakpoints in 2020 – WordPress responsive design tutorial

Even though all modern WordPress themes use responsive design by default, in some cases additional responsive adjustments are necessary. Either if you are building a website from scratch or modifying the structure of a WordPress theme, more or less responsive fixes will be needed. To maintain the perfect visual appearance on all devices we suggest you use at least 4 responsive breakpoints.

Responsive design in WordPress themes

As mentioned in the introduction, we can assume that all WordPress themes are responsive nowadays. Everything will look perfect on all devices, as long as you stick to the theme’s original design without modifying anything. But as soon as you start modifying the theme structure or adding own custom HTML elements, the visual appearance could break. It can happen on the desktop site, mobile site or in most cases on both. That’s when you need to add some CSS code that will fix the breakage on all devices. The best practice would be to add a custom CSS stylesheet that covers all responsive breakpoints.

Most common cases when WordPress themes could visually break:

• modifying default sizes of theme elements
• changing default size of fonts
• adding custom HTML elements or sections to the theme

What are responsive breakpoints?

Responsive breakpoints are screen resolutions at which some CSS styles of a HTML element change. To be more precise, screen widths measured in pixels are used as responsive breakpoints. The most common practice is to use 4 breakpoints to cover all screen sizes:

• HD monitors
• older monitors and tablets in landscape orientation
• tablets in portrait orientation
• smartphones in landscape orientation
• smartphones in portrait orientation

Some specific websites could use more or less responsive breakpoints. In our example we’ll show you how to create a 4 breakpoints responsive stylesheet.

A smart choice of responsive breaking points is essential to achieve the best visual apparance of a website on all devices.

How to define values to use as responsive breakpoints?

To define which values we should use as responsive breakpoints for our website, firstly we need to know the most common screen resolutions used by various devices. For a better insight in screen resolutions mostly used nowadays, we created this guide for better responsive design:

Desktop computers and laptops:

• 4k monitors: 3840×2160
• FullHD monitors: 1920×1080
• HDready monitors: 1366×768, 1440×900, 1680×1050
• Older models: 1280×720

Tablets and smartphones:

• iPad PRO and top Android tablets: up to 1024×1366
• older iPads and Android tablets: 768×1024
• top iPhone and Android phones: up to 420×800
• mid-range iPhone and Android phones: 360×640 to 375×800
• older iPhone and Android phones: down to 320×500

It would make no sense to create a responsive breakpoint for each screen resolution listed above. Therefore, we’ll try to cover as many resolutions as possible with each breakpoint. For a good, experience proven responsive design, we suggest the following solution:

• 420px maximum width: cover all smartphones in portrait mode
• 421px to 767px width: most smartphones in landscape mode
• 768px to 1023px: most Android tablets and iPads in portrait mode
• 1024px to 1365px: most Android tablets and iPads in landscape mode, older desktop/laptop monitors
• 1366px and above: iPad PRO, HDready and FullHD desktop laptop monitors

Note: Since FullHD monitors become a standard display and 4K monitors are becoming more and more popular, in some cases it might be necessary to add one more range to cover those resolutions. In our responsive design tutorial, we’ll stick to the 4 breakpoints model and use 1365px as the highest responsive breaking point.

Creating a custom responsive design CSS stylesheet in WordPress

To create a custom responsive design CSS stylesheet in WordPress, firstly we have to add an empty CSS file to our theme folder. For that purpose we’ll need to use a FTP client or the hosting cPanel File manager. A even simpler solution is to use a WordPress File Manager plugin.

Using a File manager, locate your theme folder folowing the path /wp-content/themes/your-theme/. Once inside the theme folder, create a new file and name it for example responsive.css. Now that you created your custom stylesheet CSS file, you have to link it to your theme’s header. If you need help with linking a CSS file to the theme header, read our guide on embedding stylesheets into WordPress theme’s header.

Adding responsive breakpoints to a stylesheet using the @media media query

Media query @media is a CSS rule used to create responsive design. With the @media rule we define ranges of screen resolutions to which specific CSS styles will apply. All responsive WordPress themes have their own media queries defined by default. We can override those media queries with our own custom responsive stylesheet containing our own responsive breakpoints.

Here is a basic example of media query implementation:

h1 { font-size: 36px; }

@media (max-width: 420px) {
 
h1 { font-size: 22px; }

}

The CSS code above resizes the main title <h1> from 36px to 22px when screen width is 420px or smaller. We used (max-width: 420px) as the only responsive breaking point in this example.

Now let’s get back to our custom responsive CSS stylesheet we created earlier. Open the CSS file using the WordPress Theme Editor or a File manager of your choice. Copy the code below into your stylesheet to create 4 responsive breakpoints with screen sizes we suggested earlier.

/* Monitors with screen width 1366px or above */

h1 { font-size: 36px; }

/*  Tablets in landscape mode, older desktop monitors */

@media only screen and (min-width: 1024px) and (max-width: 1365px) {
h1 { font-size: 32px; }
}

/*  Tablets in portrait mode, large display smartphones landscape mode */

@media only screen and (min-width: 768px) and (max-width: 1023px) {
h1 { font-size: 28px; }
}

/*  Smartphones in landscape mode */

@media only screen and (min-width: 421px) and (max-width: 767px) {
h1 { font-size: 24px; }
}

/*  Smartphones in portrait mode  */

@media only screen and (max-width: 420px) {
h1 { font-size: 20px; }
}

In the example above we resized the main title font depending on the screen width. Replace that line of code with your own set of CSS rules for each responsive breaking point. Make sure your layout looks good for each endpoint resolution. Notice we added the only screen condition to each media query. That’s because WordPress themes use a separate CSS stylesheet for printing web pages. The only screen condition will prevent the responsive stylesheet affecting the print stylesheet.

More about Media queries in responsive design

In this tutorial we showed you how to control responsiveness of your website with responsive breakpoints. You can control the visual appearance of your website even more with additional media query rules. For example, you can define additional responsive design rules such as screen resolution in dpi, display orientation (portrait / landscape), aspect ratio, display height etc. To learn more about the @media syntax check out the w3schools Media query reference.