Responsive visibility toggling in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the div hidden on small screens.

Tailwind

<div class="[1]">This text is hidden on small screens.</div>

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

Ahidden

Bvisible

Cblock

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using block or flex which show the element.

Using visible which controls visibility but not display.

The hidden class hides the element on all screen sizes.

2fill in blank

medium

Complete the code to make the div visible only on medium screens and larger.

Tailwind

<div class="hidden [1]">Visible on medium and larger screens.</div>

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

Amd:block

Blg:block

Csm:block

Dxl:block

Attempts:

3 left

💡 Hint

Common Mistakes

Using sm:block which applies from small screens, not medium.

Using lg:block which applies from large screens, missing medium.

The class md:block makes the element display as block starting at medium screen size.

3fill in blank

hard

Fix the error in the code to hide the div on large screens.

Tailwind

<div class="block [1]">Hidden on large screens.</div>

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

Alg:block

Bblock

Chidden

Dlg:hidden

Attempts:

3 left

💡 Hint

Common Mistakes

Using lg:block which shows the element on large screens.

Using hidden without prefix hides on all screens.

The class lg:hidden hides the element starting at large screen size.

4fill in blank

hard

Fill both blanks to make the paragraph visible only on small screens, hidden on medium screens and larger.

Tailwind

<p class="[1] [2]">Visible on small screens only.</p>

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

Ablock

Bhidden

Cmd:hidden

Dmd:block

Attempts:

3 left

💡 Hint

Common Mistakes

Using hidden as default hides on all screens.

Using md:block which shows on medium but not hides.

block shows the element by default (small screens). md:hidden hides it on medium screens and larger.

5fill in blank

hard

Fill all three blanks to make the div hidden on small screens, visible on medium screens, and hidden again on extra large screens.

Tailwind

<div class="[1] [2] [3]">Responsive visibility toggling.</div>

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

Ahidden

Bmd:block

Cxl:hidden

Dblock

Attempts:

3 left

💡 Hint

Common Mistakes

Using block instead of hidden for default hiding.

Missing the xl:hidden to hide on extra large screens.

hidden hides the element by default (small screens). md:block shows it starting at medium screens. xl:hidden hides it again starting at extra large screens.