Developing For The Mobile-Web: Part 1 - CSS Media Queries

August 14, 2020

Developing our web pages for the mobile web has never been more important than it is now. While the stats vary a bit, the general consensus is that more and more people own or have access to a mobile device and one in five Americans use a mobile phone for their primary access to the internet. Some don’t even own a computer.

I grew up in the early stages of the internet. I remember dial-up modems, Windows ’95, AOL and the first instant-messaging. My dad bought our first computer when I was five or six, and of course, being a web-developer, writer and podcaster myself, I probably won’t ever be without a computer, much less ever envision myself only using my iPhone as my primary access to the internet. But not everyone will own or want to own a computer, especially when mobile devices are as advanced as they are now. The mobile web is driving how developers approach a project. It is what keeps us busy.

I run across websites on an almost daily basis that are not designed for viewing on a mobile device, for one reason or another. As a developer, I feel that it is important that we always keep in mind that mobile-friendliness on the web is not a secondary issue when working on a project. It should be the first and primary focus of web-development. If you are just starting out learning to code, I’m sure you’ve already heard a lot about responsiveness and mobile-friendliness . It is definitely not just a trendy term. It is a need in this day and age. This series is meant to give you some tips on how to make your website responsive and mobile friendly and to help you get started on the right track to responsiveness. (Cue the Keurig…) Ok, ready? Let’s go. This is part 1 of 3.

The first topic I’ll tackle in this series is CSS Media Queries. CSS Media Queries were introduced with the release of CSS3 in 2012. The media query rule in CSS is important because it can help us design our website, or any browser-based project, for the mobile-web. Media queries display a certain set of CSS styles based on if a certain condition is true. They are extremely helpful if you want to modify your website based on screen resolution or browser viewport width. The CSS media query I’m going to talk about in this article is the @media rule. There are a few different types of media we can target with the @media rule.

1) all — for all media types
2) print — for printed material and documents in preview mode
3) screen — for screens, of course
4) speech — specifically for speech synthesizers

For the purpose of this article, we will be going over the screen media type. Combined with the @media rule, the screen media type will allow us to adjust our website design for mobile devices, and any device size for that matter. Keep in mind that you can of course keep all of your colors and elements on your website the same, even for mobile-devices. But for this article and podcast, I’m highlighting what is possible with CSS Media Queries. Let’s go over an example:

See the Pen CSS Media Queries Example 1 by CandiW (@CandiW) on CodePen.

In the example, you’ll see that I’ve set up a rectangle using a div element. I’ve given my rectangle a background-color of red and solid blue border. The width of my rectangle is also set at 100%, so it takes up the full width of my screen. I’ve set the height to 500 pixels.

If you scroll down in the CSS panel, you’ll find that below the initial CSS styles in my .rectangle class, I’ve set up a @media rule. In the @media rule, I want to change the background-color, size and border of my rectangle, when the screen size is 600 pixels or less. Let’s break it down even further:

1) After I call the @media rule, I’ll write screen media type, because I want the rectangle to change when the screen changes size
2) Then I’ll add the width that I want the rectangle to change at, in this case, 600 pixels.
3) Instead of taking up the whole width of the screen, I want the rectangle to be only 50% of the width
4) I’ll want the height to be reduced to 100 pixels
5) And lastly, I want to give my rectangle a different border — still the same size at 10 pixels, but I want it to be dotted and the color green.

Now you might be wondering, why do we use ‘max-width’ in our media rule, when we are changing the rectangle if the browsers width is less than 600px?? I realize that looks funny. However, there is a perfectly sensible explanation. Think of it in reverse. I want the rectangle to have a ‘blue’ background color and a green dotted border, if the browser size is 0 to 600px. If the browser size is 600px or larger, I want the rectangle to be red with a solid blue border, and be 100% of the width of the screen.

You can of course apply these steps and styles to other elements in your website design. You can also use the @media rule to adjust the size of a button. Here is an example in the following pen:

See the Pen CSS Media Queries Example 2 by CandiW (@CandiW) on CodePen.

In this example above, I’ve applied a light yellow background color to the screen. I also have a button element and I’ve given the button a certain height, width, and a purple background color. Let’s see what happens when we change the size of the our browser screen.

1. When we resize the browser screen, I want the background color to change to a light blue.
2. I also want the button size to get smaller, based on the users screen size, so I gave it smaller height and width styles.
3. And for this example, I changed the color of the button to pink, because who doesn’t like a pink button 😊.

One thing to note here regarding CSS media queries is that you should always put your media queries at the end of your CSS file. This helps with the readability and organization of your CSS stylesheet. If you’re wondering what are the typical screen widths of an iPhone, or a tablet, or a small PC, CSS Tricks has a great article that will help you decide what screen width you want to target. You can read that article here. Take some time to play around with CSS media queries and experiment with what works for you. Explore your options. The possibilities are endless.

I hope this article and podcast will help you understand media queries and their uses. Stay tuned for the next couple weeks for Parts 2 and 3 of Developing for the Mobile-Web!

Don’t forget to check out my podcast, A Cup of Code Podcast, available for listening on Spotify, Apple Podcasts, Google Podcasts, and anywhere else podcasts are available!

GitHub CodePen

Created with HTML5, CSS3, Bootstrap3 &. JavaScript