Getting Started with CSS Media Queries for Responsive Design

Laina Karosic
May 18, 2020 · 3 min read
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!

The Startup

Get smarter at building your thing. Join The Startup’s +793K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Laina Karosic

Written by

Software Engineering

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +793K followers.

Laina Karosic

Written by

Software Engineering

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +793K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store