Media queries in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply styles only on screens smaller than 600px.

CSS

@media (max-width: [1]) {
  body {
    background-color: lightblue;
  }
}

Drag options to blanks, or click blank then click option'

A1000px

B800px

C400px

D600px

Attempts:

3 left

💡 Hint

Common Mistakes

Using a value larger than 600px will apply styles on bigger screens.

Forgetting to include units like 'px' causes the media query to fail.

The max-width media feature applies styles when the screen width is less than or equal to the specified value. Here, 600px means styles apply on screens smaller than 600 pixels wide.

2fill in blank

medium

Complete the code to apply styles only on screens wider than 768px.

CSS

@media (min-width: [1]) {
  p {
    font-size: 1.2rem;
  }
}

Drag options to blanks, or click blank then click option'

A768px

B600px

C480px

D1024px

Attempts:

3 left

💡 Hint

Common Mistakes

Using max-width instead of min-width changes the target screens.

Leaving out the units causes the media query to not work.

The min-width media feature applies styles when the screen width is greater than or equal to the specified value. Here, 768px targets tablets and larger devices.

3fill in blank

hard

Fix the error in the media query syntax to target screens between 600px and 900px.

CSS

@media (min-width: 600px) and ([1]: 900px) {
  div {
    display: flex;
  }
}

Drag options to blanks, or click blank then click option'

Amax-width

Bmin-height

Cmax-height

Dmin-width

Attempts:

3 left

💡 Hint

Common Mistakes

Using min-height or max-height instead of width features.

Repeating min-width twice causes the query to fail.

To target screens between two widths, use min-width and max-width. Here, max-width: 900px sets the upper limit.

4fill in blank

hard

Fill both blanks to create a media query that applies styles only on screens between 480px and 768px wide.

CSS

@media ([1]: 480px) and ([2]: 768px) {
  h1 {
    color: darkgreen;
  }
}

Drag options to blanks, or click blank then click option'

Amin-width

Bmax-height

Cmax-width

Dmin-height

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing height and width features.

Using the same feature for both blanks.

Use min-width for the lower limit and max-width for the upper limit to target screens between two widths.

5fill in blank

hard

Fill all three blanks to create a media query that applies styles on screens wider than 1024px, with a minimum height of 700px, and in landscape orientation.

CSS

@media ([1]: 1024px) and ([2]: 700px) and (orientation: [3]) {
  nav {
    background-color: navy;
  }
}

Drag options to blanks, or click blank then click option'

Amin-width

Bmin-height

Clandscape

Dmax-width

Attempts:

3 left

💡 Hint

Common Mistakes

Using max-width instead of min-width for the first blank.

Confusing min-height with max-height.

Using 'portrait' instead of 'landscape' for orientation.

This media query uses min-width for width, min-height for height, and orientation: landscape to target wide, tall screens in landscape mode.