Responsive design in Webflow in No-Code - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the container width to be responsive in Webflow.

No-Code

<div class="container" style="width: [1];"></div>

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

A100vw

Bfixed

C500px

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed pixel widths like 500px makes the container not responsive.

Using 'fixed' is not a valid CSS width value.

Using 100vw sets the container width to 100% of the viewport width, making it responsive.

2fill in blank

medium

Complete the code to make an image scale responsively in Webflow.

No-Code

<img src="image.jpg" style="max-width: [1]; height: auto;">

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

A50vw

B500px

Cauto

D100%

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed pixel widths prevents scaling on smaller screens.

Using 'auto' for max-width does not constrain the image size.

Setting max-width: 100% makes the image scale down with its container, keeping it responsive.

3fill in blank

hard

Fix the error in the media query to apply styles only on screens smaller than 768px.

No-Code

@media (max-width: [1]) { .menu { display: none; } }

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

A768px

B768pt

C768%

D768em

Attempts:

3 left

💡 Hint

Common Mistakes

Using em or % units causes the media query to not work as expected.

Leaving out units entirely causes syntax errors.

Media queries use px units for screen widths. 768px targets screens smaller than 768 pixels wide.

4fill in blank

hard

Fill both blanks to create a flex container that stacks items vertically on small screens.

No-Code

.container { display: [1]; flex-direction: [2]; }

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

Aflex

Bblock

Ccolumn

Drow

Attempts:

3 left

💡 Hint

Common Mistakes

Using block instead of flex disables flexbox features.

Using row stacks items horizontally, not vertically.

Setting display: flex enables flexbox layout. flex-direction: column stacks items vertically.

5fill in blank

hard

Fill all three blanks to create a responsive grid with 3 columns on large screens and 1 column on small screens.

No-Code

@media (min-width: 768px) { .grid { display: [1]; grid-template-columns: [2]; gap: [3]; } }

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

Agrid

Bflex

Crepeat(3, 1fr)

D1rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex instead of grid changes layout behavior.

Not setting gap causes grid items to touch each other.

Using display: grid enables grid layout. grid-template-columns: repeat(3, 1fr) creates 3 equal columns. gap: 1rem adds space between grid items.