Skip to Content
Learn
Media Queries
Range

Specific screen sizes can be targeted by setting multiple width and height media features. min-width and min-height are used to set the minimum width and minimum height, respectively. Conversely, max-width and max-height set the maximum width and maximum height, respectively.

By using multiple widths and heights, a range can be set for a media query.

@media only screen and (min-width: 320px) and (max-width: 480px) { /* ruleset for 320px - 480px */ }

The example above would apply its CSS rules only when the screen size is between 320 pixels and 480 pixels. Notice the use of a second and keyword after the min-width media feature. This allows us to chain two requirements together.

The example above can be written using two separate rules as well:

@media only screen and (min-width: 320px) { /* ruleset for >= 320px */ } @media only screen and (min-width: 480px) { /* ruleset for >= 480px */ }

The first media query in the example above will apply CSS rules when the size of the screen meets or exceeds 320 pixels. The second media query will then apply CSS rules when the size of the screen meets or exceeds 480 pixels, meaning that it can override CSS rules present in the first media query or apply additional CSS rules that are not already present in the first.

Both examples above are valid, and it is likely that you will see both patterns used when reading another developer’s code.

Instructions

1.

Let’s make the gallery images appear larger when the screen size is small to medium size.

Write one @media query for screen sizes with a range between 320px and 480px. Use min-width and max-width to define the range.

2.

Inside the media query, select the thumbnails within the gallery with .gallery-item .thumbnail and give them a width of 95%.

You should notice that the gallery images appear wider when the screen size is between 320 and 480 pixels wide.

Folder Icon

Sign up to start coding

Already have an account?