Getting Started with CSS Media Queries for Responsive Design

Photo by Markus Spiske on Unsplash

Responsive design principles ensure a website looks good on various-sized devices — phones, tablets and laptops. Building a website with responsive design in mind involves several different key pieces, one of which is media queries. For this week’s blog, we’ll focus on getting started with media queries from scratch!

Viewport Meta Tag

When incorporating responsive design principles and media queries, you’ll want to incorporate a line of code to specify the viewport size. This viewport meta tag will specify the size of the viewport (i.e., the visible area of an app/webpage) based on the device being used. For example, the viewport on a phone is smaller than the viewport on a laptop. In your index.html within the head, place the following meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

For this media query example, we have the main title of the page, ‘Dogspace’ with a ‘.page-title’ class:

Before beginning to add a media query, the Dogspace .page-title is give some basic css styling (center alignment, a font-size of 141px, grey color and font family):

Notice in the website screenshot above that when the window screen width is 846px wide, the Dogspace page-title is visible and legible. Now, let’s shrink this window size down to 845px or lower…

The website view after the window was resized from 846px → 845px

Oh no! It looks like the window and viewport are not large enough to accommodate the Dogspace page title, at least not at it’s current size of 141px!

Let’s change that with media queries.

Media Queries Explained

Let’s take a look at a simple media query and break it down.

Example media query

@media

This says, here is a media query.

screen

Specifying ‘screen’ will apply stylings to devices with a screen (most devices will be screen as opposed to other media types such as print).

(max-width: 845px)

This line specifics the conditions under which you want the styles to be applied. Here, when the window width is at or up to 845px, apply the following styles. If the width is beyond (larger than) this, then this media query will not apply. You can alternatively set it using min-width and define conditions that way.

And now when we shrink our window to 845px or below for the second time:

And the page-title font size is now 90px. Now we have a responsive page title!

There are many different components to responsive design, and to media queries alone. Now that you see how easy it is to get started, have fun making cool changes to your website with responsive design principles in mind!