In previous exercises, we chained multiple media features of the same type in one media query by using the and operator. It allowed us to create a range by using min-width and max-width in the same media query.

The and operator can be used to require multiple media features. Therefore, we can use the and operator to require both a max-width of 480px and to have a min-resolution of 300dpi.

For example:

@media only screen and (max-width: 480px) and (min-resolution: 300dpi) { /* CSS ruleset */ }

By placing the and operator between the two media features, the browser will require both media features to be true before it renders the CSS within the media query. The and operator can be used to chain as many media features as necessary.



The website’s text needs to be larger for users who have small, low resolution screens.

Write a media query that applies when the max-resolution is 150dpi and the screen has a max-width of 480px.


Inside the media query, make the font-size of the .page-description element 20px.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?