Responsive Visibility: Gotcha & Specific Ranges

Resize your browser window to see how elements appear/disappear at different breakpoints. Tailwind breakpoints: sm (640px), md (768px), lg (1024px).

Gotcha Example 1: Show ONLY on Small Screens (xs, sm)

VISIBLE only on 'xs' and 'sm' screens.

HIDDEN from 'md' (768px) and up.

(Using: block md:hidden )

Content for 'md' and larger screens (when red box is hidden).

This demonstrates the gotcha: md:hidden means hidden from 'md' *and up*. The initial block makes it visible on screens smaller than 'md'.

Gotcha Example 2: Show ONLY on Medium Screens (md)

VISIBLE only on 'md' screens (768px to 1023px).

HIDDEN on 'xs', 'sm', and from 'lg' (1024px) and up.

(Using: hidden md:block lg:hidden )

Content for 'xs' and 'sm' screens (when green box is hidden).

Content for 'lg' and larger screens (when green box is hidden).

This shows how md:block is active for 'md', but lg:hidden overrides it for 'lg' and larger. The initial hidden ensures it's not visible on 'xs' or 'sm'.

Test these examples by resizing your browser window:

Red Box: Should be visible below 768px. Hidden at 768px and above.
Green Box: Should be hidden below 768px. Visible between 768px and 1023px. Hidden at 1024px and above.