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
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.
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.