Mobile-first approach in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the base font size for mobile devices.

CSS

body { font-size: [1]; }

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

A16rem

B16px

C100px

D1em

Attempts:

3 left

💡 Hint

Common Mistakes

Using rem or em units without understanding their base.

Setting font size too large like 100px.

The base font size for mobile devices is commonly set using 16px for readability and consistency.

2fill in blank

medium

Complete the media query to apply styles for screens wider than 600px.

CSS

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

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

A800px

B400px

C600px

D1000px

Attempts:

3 left

💡 Hint

Common Mistakes

Using max-width instead of min-width.

Choosing a wrong pixel value like 400px.

The media query uses min-width: 600px to target devices wider than 600 pixels, typically tablets and desktops.

3fill in blank

hard

Fix the error in the media query syntax for mobile-first design.

CSS

@media [1] (max-width: 599px) { p { font-size: 14px; } }

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

Aonly screen and

Bmax-width:

Cmin-width:

Dscreen and

Attempts:

3 left

💡 Hint

Common Mistakes

Using only max-width without media type.

Using min-width instead of max-width here.

The correct syntax for media queries includes only screen and before the condition for better browser support and clarity.

4fill in blank

hard

Fill both blanks to create a mobile-first media query that changes the layout for larger screens.

CSS

@media [1] ([2]: 768px) { .container { display: flex; } }

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

Aonly screen and

Bmin-width

Cmax-width

Dscreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using max-width instead of min-width for mobile-first.

Omitting 'only screen and' causing less compatibility.

The media query uses only screen and with min-width: 768px to apply styles on screens 768px and wider, following mobile-first approach.

5fill in blank

hard

Fill all three blanks to create a responsive font size that increases on larger screens.

CSS

html { font-size: [1]; } @media [2] ([3]: 900px) { html { font-size: 18px; } }

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

A16px

Bonly screen and

Cmin-width

Dmax-width

Attempts:

3 left

💡 Hint

Common Mistakes

Using max-width instead of min-width for larger screens.

Forgetting to include media type in the query.

The base font size is set to 16px for mobile. The media query uses only screen and min-width: 900px to increase font size on larger screens.