Skip to Main Content

Design WordPress Responsive with the @media rule of CSS3

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Noting the increasing use of mobile devices, since the end of April 2015, Google has penalized websites whose pages are not ready for mobile. Consequently, for your SEO, you must make sure that your website is displayed decently on large screens as well as on small ones.

responsive wordpress design media rule css3

In this article, I'll show you how you can put your website to the page using the rule @media Of CSS3.

It is important to note that the terms “responsive” and “mobile-compatible” are often used interchangeably despite the difference in their real meaning. Understanding what each means is important to be able to ensure that your website meets the necessary criteria to accommodate all screen sizes.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then, let's go back to why we are here.

Responsive and mobile-compatible

Websites that are not Neither responsive nor mobile-compatible, are displayed identically on all screens, ie the version for large screens is displayed everywhere. On smaller screens, you have to scroll the page horizontally to see all of their content. They are difficult to navigate on these screens. 

Discover also these 8 WordPress plugins to customize the look of your website

A website is Mobile compatible when it only meets the strict minimum to be seen on mobile, which does not make it a responsive website. For example, a website can be considered mobile-compatible if you don't have to navigate horizontally. This causes its elements to become small and indistinguishable. You must then zoom in to read its content.design wordpress responsive media rule css3 2

On their side the websites responsive adapt perfectly to different screen sizes. They redefine their elements so that they can easily be seen and used on the smallest screens. This is the type of design you want for your website.

See also our 10 WordPress plugins to create a booking form on your website

You now know the difference between responsive and compatible-mobile. We will now see the rule @media CSS3 which allows you to update your website to be responsive or to easily create WordPress themes with responsive content.

Rule @media From CSS3

To make your theme responsive, you will need the rule @media of CSS3. Basically, it allows you to define the styles you want to use for a particular type (size) of screen. You'll use it like another CSS rule (with braces) with the only difference that it nests other CSS rules.

@media media-type (expression) {css-test-selector {property1: value1; property2: value2; }}

In this structure the elements inside the rule @ media Operate only when the kind-of-media specified to have been successfully detected. The type of media chosen, you can specify the characteristics in terms of dimensions.

design wordpress responsive media rule css3 3Discover How to Apply Interface and User Experience to WordPress

Rule @media detects for you the type of screen with which your website is visited and chooses the rules that best suit this type of screen. All major browsers have already integrated the rule @media.

Here is the list for your information: Chrome , Safari, Firefox, IE, Opera et Edge.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Define the target screens

If you want to modify an existing WordPress theme, please make a backup copy of the CSS of the latter so that you can go back if necessary.

Read also our article on How to gradually load Facebook and Disqus comments

As we have seen in its structure, to define the type of screen, you must forward @media the type of screen targeted. Here is the list of the different types of screen:

- ALL : for all types of screens or for the dimensions specified in expression
- screen : for all screens, whether mobile, tablet, laptop or desktop
- print : for printers, if you want specific styles for the pages that can be printed
- speech : for screen readers, if you want styles for the visually impaired.

There are also operators that you can put before the screen type; as Note to display styles for screens that are of a different type than the one specified or only to apply styles only to specified screens. You can therefore have:

@media only screen

Define styles for screen dimensions

You can use expression to provide more details on the characteristics of the screen. After @media enter and followed by the expression. If you use more than one expression, they should all be separated by and. Here is an example of the structure:

@media only screen and (max-width: 640px) {selector-css-example {/ * Your usual CSS here * /}}

In this example I use max-width With a value of 640px. This is to set a maximum screen width of the size of an iPhone or a small Android smartphone. With this kind of structure, you have control over how your website looks on different devices. Here is a list of properties related to dimensions that you can use in expression :

Discover also our 8 SEO WordPress plugins to optimize the SEO of your website

- min-width et max-width : respectively the minimum and maximum width required for the display of styles contained in the rule @media. One more pixel and styles are not displayed.

- min-height et max-height : respectively the minimum and maximum height required for displaying the styles contained in the rule @media. Because most screens are designed to unroll pages vertically, properties min-height et max-height are little used.

Here is a list of screen sizes for some terminals:

- IPhone: 640px
- IPad: 1024px
- Tablets: 1366px
- Android smartphone: 640px, 720px, 854px, 960px
- Android extra large: 1024px, 1066px
- Windows phone: 480
- Windows phone large: 768px
- young and old: 320px
- Ultrabook / Laptops: 1366px
- Desktops and TVs: 1920px

There are many other properties that you can use in expression. For example, if you are targeting desktops or television screens capable of displaying 16: 9 aspect ratio images you could use a structure like this:

@media only screen and (min-width: 1920px) and (device-aspect-ratio: 16/9) {selector-css-example {/ * Your usual CSS here * /}}

 For more complete lists and examples, consult w3schools et Mozilla Developpers.

Test the responsive functionality of your website

As you modify or build your WordPress theme or at the end if you like surprises, you need to test the result to see if it is ultimately responsive. Remember, Google is watching for websites that aren't responsive.

See also these 10 WordPress plugins to create tabs on your blog

Failing to have all the mobile devices that you are targeting, there are (fortunately for our stock exchanges) a good number of tools to see how your website adapts to different screens.

Directly in the browser of your computer you can use Window Resizer Chrome Browser Extension, ResponsiveResize, ResizeMe ou Firesizer. Below is an image of BlogPasCher in the Responsive Design View which comes by default with Firefox.

css3-media-firefox-responsive-design-view

There are also websites dedicated to the task:

Responsivepx

css3-media-responsivepx

This website has the particularity of letting you choose the dimensions of the screen yourself. Note that this website loads yours in a frame. So if your WordPress theme was designed not to display in a frame, then it is quite possible that the latter is not displayed here.

IPad Peek

https://blogpascher.com/wp-admin/post.php?post=60969&action=editcss3-media-ipad-peek

This website is useful for testing your website on the latest Apple, iPad and iPhone devices. Just enter your URL. Note that it is subject to the same frame problem as responsivepx.

Mobile Phone Emulator

css3-media-mobile-phone-emulator

In this website you can test yours on small screens and on older models of phones that you select on the right side of the screen. You can also configure some screen properties.

Google Mobile Friendly test

css3-media-google-mobile-friendly test

This is one of the most important tests, if not the most important. Just enter your address in the bar and click on Analyze to start the test. After the test, the tool displays a report and a score. If the test is positive, then all the better, you will not be penalized by Google.

If you are not a developer I advise you a list of responsive WordPress themes to begin.

Recommended Resources

Also discover other recommended resources that will help you to better attract your partners and subscribers, but also to improve the security of your website.

Conclusion

Here ! you know everything there is to know about how to make your website or WordPress theme responsive using the rule @media Of CSS3. If we missed a WordPress theme that is dear to you or that you prefer, please leave a link in the section Comments below.

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

We also invite you to share on your different social networks.

...

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
4 shares
Share4
tweet
Save