Easily create responsive designs using Media Query in CSS… but is it too good to be true?

Posted on by jasonbrown

‘Responsive design’ and ‘fluid design’ have been somewhat of a buzzword lately, with designers left, right and centre thinking about the topic – but what does it mean? It’s basically just designing a webpage or an app that scales perfectly to all of the different-sized devices that we use today: smartphones, tablets, desktop computers and laptops. All of these devices use different-sized screens and not so long ago they all used different display resolutions too, but now that smartphones and tablets are beginning to come with higher-resolution screens, but are not actually getting much bigger in physical size – for example the 6″ Nokia Lumia 1520 from 2013 still remains one of the largest smartphones ever produced, even some 4 years later! This is making it harder to design interfaces for a range of devices – a website needs to look different on a 24″ 1080p monitor than it does on a 5″ 1080p smartphone and a 10″ 1080p tablet, so how do we go about designing responsive interfaces when the resolution is the same but the physical screen size is not?

One thing you can do is use Media Queries which act as breakpoints to change certain aspects of the interface depending on the detected screen resolution. Assuming that a website is built on a framework of 12 columns, these columns can be rearranged at different resolutions to move objects in the interface to different positions. This article shows how to create a layout that scales depending on screen width, shown below:

As you can see, the position of the buttons and the footer area changes depending on the resolution of the screen that the website is being viewed on. This is all done using Media Queries in CSS and is a relatively straight-forward way of designing for different screen resolutions.

Before we begin, see my completed example here! Try resizing the browser window to adjust the resolution of the site to show the resizing and scaling.

Let’s get started!

Let’s begin by getting the HTML in place. The HTML consists of just a few classes such as a header area, an unorganised list to make the buttons you see on the left-hand side, a paragraph area for the main body of text and a footer area. All of these will be explained later, but for the time being here is the HTML code.

<head>
 <meta charset="utf-8" />
 <link rel="stylesheet" type="text/css" href="style.css">
 <title>Media Query CSS Example</title>
</head>
<body>
 <div class="header">
 <h1>New York</h1>
 </div>

<div class="row">

<div class="col-3 col-m-3 menu">
 <ul>
 <li>The Flight</li>
 <li>The City</li>
 <li>The Islands</li>
 <li>The Food</li>
 </ul>
 </div>

<div class="col-6 col-m-9">
 <h1>The City</h1>
 <p>The City of New York, often called New York City or simply New York, is the most populous city in the United States. With an estimated 2016 population of 8,537,673 distributed over a land area of about 302.6 square miles (784 km2), New York City is also the most densely populated major city in the United States. Located at the southern tip of the state of New York, the city is the center of the New York metropolitan area, one of the most populous urban agglomerations in the world.</p>
 </div>

<div class="col-3 col-m-12">
 <div class="aside">
 <h2>What?</h2>
 <p>New York City is the most populous city in the USA.</p>
 <h2>Where?</h2>
 <p>New York City lies on the east coast of the USA.</p>
 <h2>How?</h2>
 <p>You can reach New York by air and sea from all across the world.</p>
 </div>
 </div>

</div>

<div class="footer">
 <p>Resize the browser window to see how the content respond to the resizing.</p>
 </div>
</body>

With the HTML in, it’s time to look at CSS which of course can be used to alter the design and appearance of the website. To begin with, we’ll apply some basic styles to some of the HTML classes that we created, such as the footer area, the header area and the rows.

* {
box-sizing: border-box;
}

.row::after {
content: "";
clear: both;
display: table;
}

[class*="col-"] {
float: left;
padding: 15px;
}

html {
font-family: "Lucida Sans", sans-serif;
}

.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}

.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
background-color: #0099cc;
}

.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}

You can adjust most of these settings as you wish, for example you can alter the background colours and text alignment if you wish. The interesting CSS code is to be found in the Media Queries, shown below.

/* For mobile phones: */
[class*="col-"] {
width: 100%;
}

@media only screen and (min-width: 600px) {
 /*For tablets*/
 .col-m-1 {width: 8.33%;}
 .col-m-2 {width: 16.66%;}
 .col-m-3 {width: 25%;}
 .col-m-4 {width: 33.33%;}
 .col-m-5 {width: 41.66%;}
 .col-m-6 {width: 50%;}
 .col-m-7 {width: 58.33%;}
 .col-m-8 {width: 66.66%;}
 .col-m-9 {width: 75%;}
 .col-m-10 {width: 83.33%;}
 .col-m-11 {width: 91.66%;}
 .col-m-12 {width: 100%;}
}

@media only screen and (min-width: 769px) {
 /* For desktop: */
 .col-1 {width: 8.33%;}
 .col-2 {width: 16.66%;}
 .col-3 {width: 25%;}
 .col-4 {width: 33.33%;}
 .col-5 {width: 41.66%;}
 .col-6 {width: 50%;}
 .col-7 {width: 58.33%;}
 .col-8 {width: 66.66%;}
 .col-9 {width: 75%;}
 .col-10 {width: 83.33%;}
 .col-11 {width: 91.66%;}
 .col-12 {width: 100%;}
}

You’ll probably be looking at this code and thinking ‘what is ‘col-1’ and ‘what is col-m-1’? These are columns. Let’s assume that every website is made up of 12 columns and each of these 12 columns covers 8.33% of the total width of the webpage (we come to this number by dividing 100 by 12 to get 8.33) and that by resizing the web browser (or changing the resolution of the device that the webpage is being viewed on), the columns can be moved around and thus elements of the webpage can be moved around depending on the width of the web browser or the width of the screen resolution.

Earlier in the CSS we made a class called ‘col-‘ and in this class we set the universal properties of each item defined in it to:

[class*="col-"] { float: left; padding: 15px; }

…float left and pad 15px to the right. This allows the columns to move about as the screen width is changed and it is applied to allow columns, since they’re all defined in that CSS class.

It’s good practice to design with a ‘mobile first’ mindset because it will save you having to load large images where not applicable. Let’s not also forget that a growing amount of users are viewing the web on mobile devices now, so designing for mobile devices is important. The code below specifies that the column width is going to be 100% – basically there’s going to be one column that fills the entire width of the screen. This is our mobile site design and because it comes first in the CSS code, it is loaded before the other site designs.

/* For mobile phones: */
[class*="col-"] {
width: 100%;
}

Media Queries make designing for other resolutions very easy. You don’t even have to specify exactly where the buttons are going to go, all you have to do is specify the width of the columns and at which minimum width you want the styles to be applied. We know that each column of the page represents 8.33% of the width of the webpage, so just keep adding 8.33% onto each width to eventually make 100%. You can use this code for any resolution you want, all you have to do is specify the minimum width in the @media line and then CSS automatically rearranges the columns to fit the screen.

@media only screen and (min-width: 600px) {
 /*For tablets*/
 .col-m-1 {width: 8.33%;}
 .col-m-2 {width: 16.66%;}
 .col-m-3 {width: 25%;}
 .col-m-4 {width: 33.33%;}
 .col-m-5 {width: 41.66%;}
 .col-m-6 {width: 50%;}
 .col-m-7 {width: 58.33%;}
 .col-m-8 {width: 66.66%;}
 .col-m-9 {width: 75%;}
 .col-m-10 {width: 83.33%;}
 .col-m-11 {width: 91.66%;}
 .col-m-12 {width: 100%;}
}

The code above is activated only when the screen resolution is at least 600px wide.

@media only screen and (min-width: 769px) {
 /* For desktop: */
 .col-1 {width: 8.33%;}
 .col-2 {width: 16.66%;}
 .col-3 {width: 25%;}
 .col-4 {width: 33.33%;}
 .col-5 {width: 41.66%;}
 .col-6 {width: 50%;}
 .col-7 {width: 58.33%;}
 .col-8 {width: 66.66%;}
 .col-9 {width: 75%;}
 .col-10 {width: 83.33%;}
 .col-11 {width: 91.66%;}
 .col-12 {width: 100%;}
}

The above is activated only when the screen resolution is at least 769px wide. Most people using desktop and laptops computer are using monitors with a higher width resolution of 769px, though.

You can change the resolutions to suit your own needs.

So, it’s very easy to create mobile designs using Media Queries in CSS – almost too easy perhaps? What’s the catch?

The catch is that it doesn’t always work! As mentioned earlier, all mobile devices have different resolutions and some are now becoming the same resolution as desktop monitors whilst the physical screen sizes are sometimes 5 times smaller than a desktop monitor, which makes mobile design really hard using Media Queries at least.

Below is a screenshot from a 5″ 1080p Nokia Lumia 930 smartphone running the website described in this article with the mobile site set to activate if the screen width is less than 599px and the tablet site set to activate if the screen width is less than 769px.

 

As you can see, actually neither the mobile or the tablet website is activated, but rather the desktop website. This is because the screen width on this device is 1,080px – higher than the bounds set in the CSS code. If the bounds are changed to 1,100px for the tablet site and 1,200px for the desktop site, you can see that the mobile site is now displaying on the 1080p Lumia 930, but it also means that on some smaller desktop and laptop resolutions that were popular, you may see either the mobile or tablet website instead of the desktop website. Very few people are still using monitors as low a resolution as 1024×768, but those who are will see the mobile website instead of the desktop website which won’t be the layout optimised for their screen resolution.

On an iPad 5th Generation which has a 2048×1536 display, I couldn’t get either the mobile or tablet site to work properly without meaning the desktop site wouldn’t display for common desktop resolutions such as 1366×768, 1600×900, 1680×1050 and 1920×1080. Even higher resolutions that aren’t common like 2560×1440 may potentially show the mobile or tablet site instead of the desktop site if I adjusted the bounds to work with the iPad’s high resolution display.

The issue is that mobile devices aren’t really getting any bigger, but their screen resolutions are which means that whilst they can display more on the screen but they still need a special mobile design since their screens are much smaller than that of a desktop’s display.

Here are some more things you can use Media Queries for

You can use them to change certain aspects of your site depending on the orientation of the device. The code below changes the background colour to light blue if the phone is rotated from portrait mode to landscape mode.

@media only screen and (orientation: landscape) {
 body {background-color: lightblue;}
}

You could get it to do other things too, like adjust the width of columns, display images or change the colour of certain elements like the header or footer.

You can use Media Queries to alter backgrounds on your website depending on the device. You may want to load a lower resolution background on lower resolution or slower devices to speed up page loading times, here is the code that will enable you to change the background depending on the resolution of the device.

/* For devices smaller than 400px: */
body {
 background-image: url('bg3.jpg');
}

/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
 body {
 background-image: url('bg2.jpg');
 }
}*

So for devices with a width smaller than 400px, a file called ‘bg3.jpg’ will be loaded as the background image and for devices with a width higher than 400px, a file called ‘bg2.jpg’ will be used as the background image. You can of course change the image names.

Finally, you can make photos and videos scale nicely using CSS too. These don’t use Media Queries, but it’s good to know how to do them anyway.

To make an image scale in CSS, firstly put this in your CSS style sheet.

img {
 max-width: 100%;
 height: auto;
}

By specifying the max width as 100% and setting the height to automatic, the image will change size as the page changes size. You need to use an <img src> tag in your HTML to insert the image into the desired area of your HTML markup. You can see how it scales in the screenshot below.

You can do the same for videos too. Place the code below into your CSS code.

video {
 width: 100%;
 height: auto;
 }

And using the <video> tag in your HTML markup to add an HTML 5 video.

There we have it! A little bit of responsive design using CSS and Media Queries, but it’s not 100% perfect!