Control your page design in different screen sizes using media queries
By: Manu Magalhães
Tags: Front End Development, Media Queries, CSS, Codingbootcamp

You finally got your webpage looking exactly the way you want. But… you know people have different devices, right? I mean, your site will look great in any screen size, RIGHT?

TLDR; Section 1 explains how it works, Section 2 explains the syntax and Section 3 shows the code.

If your answer is anything other than a resounding yes, you’re in the right place. Learn more about media queries, a neat and easy way to make your website look precisely as you want for any screen size of your choice.

This is what we’ll create together in this example: as the screen changes sizes, the layout changes too.

Step 1: Understand how it works

Short and sweet: media queries change the styling of your page according to the screen size you specify. Besides, whatever CSS you have already rolling in your code will act as the default for your media queries. So no need to repeat yourself, nor to refactor code later on: in your media queries, just write the changes you want to apply.

Step 2: Understand the syntax

@media only screen and (min-width: 768px) { /* your style */ }

Simpy put, this means that any any screen with 768 px or greater width will show the style added inside the curly brackets. This code overwrites the “default” code line established before.

If you’re curious about the dirty details, keep reading. Otherwise, just jump to the next section.

@media is a CSS rule that injects different styles for different media devices;

is a CSS rule that injects different styles for different media devices; only is a key that you can use if you want to hide the styles from other, less common browsers;

is a key that you can use if you want to hide the styles from other, less common browsers; screen defines the media as “screen” — it could be print, for example. If you want your fonts to be sans serif in screen and serif in print, now you know what to do.

defines the media as “screen” — it could be print, for example. If you want your fonts to be sans serif in screen and serif in print, now you know what to do. min-width is the property that defines the media type minimum width, meaning that any screen size with the specified width (or larger) will behave as defined by the media query. You could also use max-width, which has the opposite meaning, if that works better for you. See a complete list of further options here.

Step 3: Code!

So here is the code. The HTML is as bland as it could be:

Because all the magic happens in our CSS:

In body and #imgContainer we defined that the default for our page will be a pink background with a banana image right in the center. We also defined a little transition for them and a size for the image container.

Then, we decided that screen sizes with 420px or greater will show a blue background with a pineapple image instead. We’re also using Flexbox ❤, which is very helpful when creating responsive pages. (If you never heard of it, check this introduction to Flexbox written by my friend Rhys).

To check if you changes work, open your dev tools (Ctrl+Shift+I in Chrome) and click the device icon:

It will open your page in a special view, where you can check how any webpage looks like in a device of pretty much any size. To cancel this view, click again the device icon.

How easy was that? Ready to complete the whole design now?

So, there you go, time to unleash your creativity! You can change backgrounds, fonts, the whole layout, pretty much anything! And if you need some reference to most popular screen sizes, check here. They’ve even included sizes for wearables :)