Responsive Web Design

California Adventures

Resize the browser window to see how the images, text, navigation, and layout change for desktop, tablet, and smartphone screens.

What This Page Demonstrates

On a desktop, the cards appear in three columns. On a tablet, they change to two columns. On a smartphone, they stack into one column. The images and text also resize to fit the screen.

Mountains beside a lake

Mountain Escape

This image automatically scales to fit inside its card without overflowing on smaller screens.

Ocean waves beside a beach

Coastal Journey

CSS Grid changes the number of columns depending on the amount of available screen space.

Tall trees in a forest

Forest Trail

The text, spacing, navigation, and layout adjust to make the page easier to view on mobile devices.

Responsive Techniques

This page combines several responsive web design techniques.