How to Write Media Queries for Responsive Design

Responsive website designs are important for your website’s long term success. A good responsive website design will have better usability and therefore will convert more visitors to customers. In addition, websites that are able to change their appearance based on the device being used can rank higher on Google and other search engines.

If you’re creating a theme for WordPress or Shopify or looking to create your own website using a unique platform, then you need to know how to write media queries for responsive designs. While this might sound very challenging, this is actually very easy.

The Components Needed for Writing Media Queries for Responsive Designs

There are three things that are really needed for writing media queries when you want to create a responsive design. The first is the optional identifier. This is something that doesn’t impact the design of the website but is rather used as a market to tell those who might want to edit the code later what the purpose of the next line is.

An example of this could be:

/* For mobile phones: */

Then you need to add in the conditions of the code to be applied. When you’re writing a media query for a responsive design, you’re going to want to add a condition that responds to the website design. You can check what conditions you would like to use by testing the screen resolution of your website.

A lot of mobile devices have a screen resolution that is less than 600 pixels. You can test your own mobile phone to check this.

To add a code that will check this for you, you can use the following template below:

@media only screen and (max-width: 600px)

Then you need to add the condition which is used on the screen. This can be anything from the color of the background, the size of the text, where paragraph breaks are or even the width of the column.

It is best to have as little on a row as possible when you’re building a responsive website design. You don’t want the user to have to scroll left to right as well as up and down. It is far easier for them to scroll up and down. It is also more SEO-friendly.

Here are a few examples of the code that you could use. This is to change the background color:

{ body { background-color: lightblue; } }

and this is to change the column width on a page to 100%.

div { column-width: 100px; }

You can also combine these with instructions for desktop. If you’re doing this, you can create complex designs for desktops and easier ones for mobile devices. Here is an example for changing the column width.

Final Word: How to Write Media Queries for Responsive Design

When you’re looking to create a responsive website design for your website, you can use the above tips to create the code for that. Alternatively, you can use a responsive theme for many different platforms or use a custom code app or plugin that is available for your platform.