CSS3 Media Queries for Responsive Design on Mobile Screens

In 2020, the number of smartphone users is 3.5Billion, which translates to 45% of the world population owning a smartphone. Why is this important? Well, for a web developer this implies that majority of web browsing traffic will come from smartphones and tablets. Statcounter has recorded 39% mobile users access the internet with an android device. Chances are quite high that your website will be viewed on a mobile device before desktop.

Using Media Query in your CSS3 will ensure that your website displays properly and neatly on mobile screens just as the desktop version would without any quirks or distortion.

How it works

In this tutorial, we will explore Media Query use for Media Type screen. Media Types let you specify a type of media to target such as print or speech which won’t be covered here so feel free to read more about them here.

A screen type Media Query will check for the capability of the device’s screen such as width, height or resolution of the view-port(screen-size). Once the conditions are true the linked style-sheet or CSS3 enclosed in the Media Query will be applied to the website, giving it a format proportionate to the current resolution, width and height of the view-port.

Syntax

<link rel="stylesheet" media="screen and (max-device-width: 780px)" href="style.css" />

Above is the CSS for initiating a ‘style.css’ file with respect to the page width of 780px. If this is the maximum resolution of the current device’s screen, then the styles defined in ‘style.css’ will be applied.

Different styles can be defined within the same CSS style-sheet such that they are only utilized if certain conditions are met. For example, this portion of our responsive CSS would only be used if the current device had a width above 480px.

media screen and (min-width: 480px) {
    div {
        display: flex;
        flex-direction: column;
    }
}

Break-Points

A break-point is the minimum/maximum width at which the Media Query and it’s conditions will be initiated. For a developer, building for the right screen type will be a challenge given the innumerable mobile devices with different view-ports. However here are a few standard widths to start with.

480px, 600px, 768px, 992px, 1200px

/* Extra small devices (phones, 480px and down) */
@media only screen and (max-width: 480px)    {...} 

/* Small devices (tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...} 

/* Medium devices (landscape tablets, 768px and up) */
   @media only screen and (min-width: 768px) {...} 

/* Large devices (laptops/desktops, 992px and up) */
   @media only screen and (min-width: 992px) {...} 

/* Extra large devices (laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Display or Hide

When using Media Queries some features for your website may not fit on smaller mobile screens. Using properties such as display:none to hide or show elements can go a long way to refine your mobile version.

/*If the screen size is 600px or less, hide element.*/
@media only screen and (max-width: 600px) {
 div.example {
 display: none;
 }

Pseudo-elements such as :before or :after can also be used to apply specific styling to certain HTML elements in different view-ports.

Always Design for Mobile First

Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices).

Start your styling when the width gets smaller than 768px (mobile), then change the design when the width gets larger than 768px.

Example: Change font-size on smaller displays.

If the screen size is 480px or less, set the font-size of title to 40px.

@media only screen and (max-width: 600px) {
  h1.title {
       font-size: 40px;
  }
}

If the screen size is 768px or more, set the font-size of title to 95px.

What’s Next?

So far, we’ve been able to explore the basic concepts of how some of the building blocks for responsive web design work I have found w3schools to be a great resource for further learning.