Free CSS course. Sign Up for tracking progress →

CSS: Media queries

Many devices with different screen sizes and resolutions are used to browse the Internet, such as computers, smartphones, tablets, laptops, and so on. This number of devices requires developers to be able to adjust their pages for different resolution variations.

One way to change styles depending on the resolution is to use special CSS rules which work under certain conditions. Such conditions can be:

  • Width or height of the viewport
  • Horizontal or vertical screen orientation
  • Device type

and others.

In this lesson, we'll learn about the @media rule and look at a few standard applications. It's not the goal of this lesson to explain all the intricacies of working with adaptive pages, so we'll focus on the key things.

Media rule

All media queries follow a similar pattern and use the @media construct:

@media (Condition) {
  /* Rules */
}

What rules are given inside the @media construct? It can be anything! Think of it as a new CSS file, with its own selectors and properties. For example, you may want to change the text color in elements with the class .text to black. Then the design will take on this image:

@media (Condition) {
  .text {
    color: #000000;
  }
}

What are the conditions? Suppose you want to change the text color if the width of the viewport is less than or equal to 700 pixels. Then the rule max-width: 700px needs to be specified. TThis is very similar to a normal CSS rule which will define that properties should work if the viewport width is 700 pixels or less:

@media (max-width: 700px) {
  .text {
    color: #000000;
  }
}

With the advent of smartphones, the need to work with the way the user holds the phone, either vertically or horizontally, is very relevant. When the user holds the phone vertically, the screen height is greater than its width. When used horizontally, the opposite is true - the width is greater than the height. This requires proper alignment of blocks on the page so that it can be used comfortably from any position.

Media queries have a special condition orientation, which can have one of two values:

  • portrait - portrait orientation of the device. The screen height is bigger than its width
  • landscape - landscape orientation of the device. The screen height is smaller than its width

Let the text be white for portrait orientation and black for landscape orientation:

@media (orientation: portrait) {
  .text {
    color: #ffffff;
  }
}

@media (orientation: landscape) {
  .text {
    color: #000000;
  }
}

Media queries can be much more complex, with many different variations. We can't cover all of this in one lesson, but you've already learned how media queries are constructed, what they are for, and how to add them to your CSS file

Instructions

Add white text color to paragraphs with the class white-text-mobile for devices with a screen width of 750 pixels or less. Write the styles in the <style> tag

The exercise doesn't pass checking. What to do? 😶

If you've reached a deadlock it's time to ask your question in the «Discussions». How ask a question correctly:

  • Be sure to attach the test output, without it it's almost impossible to figure out what went wrong, even if you show your code. It's complicated for developers to execute code in their heads, but having a mistake before their eyes most probably will be helpful.
In my environment the code works, but not here 🤨

Tests are designed so that they test the solution in different ways and against different data. Often the solution works with one kind of input data but doesn't work with others. Check the «Tests» tab to figure this out, you can find hints at the error output.

My code is different from the teacher's one 🤔

It's fine. 🙆 One task in programming can be solved in many different ways. If your code passed all tests, it complies with the task conditions.

In some rare cases, the solution may be adjusted to the tests, but this can be seen immediately.

I've read the lessons but nothing is clear 🙄

It's hard to make educational materials that will suit everyone. We do our best but there is always something to improve. If you see a material that is not clear to you, describe the problem in “Discussions”. It will be great if you'll write unclear points in the question form. Usually, we need a few days for corrections.

By the way, you can participate in courses improvement. There is a link below to the lessons course code which you can edit right in your browser.

If you got stuck and don't know what to do, you can ask a question in our huge and friendly community