client:media for responsive interactivity in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to load the component only on screens wider than 768px.

Astro

<MyComponent client:media="(min-width: [1]px)" />

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

A768

B480

C1024

D320

Attempts:

3 left

💡 Hint

Common Mistakes

Using a width smaller than 768px will load the component on smaller devices.

Forgetting to include 'px' in the media query string.

The client:media directive uses a media query string. Here, (min-width: 768px) means the component loads only on screens 768 pixels wide or wider.

2fill in blank

medium

Complete the code to load <NavMenu> only on screens smaller than 600px.

Astro

<NavMenu client:media="(max-width: [1]px)" />

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

A768

B480

C600

D1024

Attempts:

3 left

💡 Hint

Common Mistakes

Using min-width instead of max-width.

Choosing a breakpoint larger than intended.

The client:media directive with (max-width: 600px) loads the component only on screens 600 pixels wide or smaller.

3fill in blank

hard

Fix the error in the media query to load the component on screens wider than 1024px.

Astro

<Header client:media="(min-width: [1])" />

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

Apx1024

B1024px

C1024

Dwidth:1024px

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting 'px' units in the media query.

Adding units incorrectly like 'px1024'.

The media query must include units. 1024px is correct. Without 'px', the query is invalid.

4fill in blank

hard

Fill both blanks to load <Sidebar> only on screens between 640px and 1024px wide.

Astro

<Sidebar client:media="(min-width: [1]px) and (max-width: [2]px)" />

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

A640

B768

C1024

D1280

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping min-width and max-width values.

Using breakpoints outside the intended range.

The media query uses min-width: 640px and max-width: 1024px to target screens between those widths.

5fill in blank

hard

Fill all three blanks to load <Footer> only on screens wider than 1280px and with orientation landscape.

Astro

<Footer client:media="(min-width: [1]px) and (orientation: [2]) and (prefers-reduced-motion: [3])" />

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

A1024

Blandscape

Cno-preference

D1280

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect values for orientation or prefers-reduced-motion.

Forgetting to include all conditions in the media query.

This media query loads the component on screens wider than 1280px, in landscape orientation, and when the user has no preference for reduced motion.