Skip to content
AI Exercises
–points–day streak

What is responsive design?

Responsive design means a page rearranges itself to fit any screen, from a wide computer monitor to a small phone.

In real life

Like water, which takes the shape of whatever glass you pour it into.

Try it yourself

Screen size

Switches

This lesson
rosas-bakery.example
Rosa's Bakery
Basket (0)

Fresh bread, baked at 6am

Order by 10am, collect after lunch.

  • Sourdough loaf

    £4.00

  • Cinnamon bun

    £2.50

  • Lemon cake

    £3.00

On a narrow screen, the responsive page rearranges itself: the cards stack and the menu folds into a button.

Where you will use this

  • Track 2, lesson 3: Generate your first appComing soon
  • Module 6: Getting found (mobile-friendly pages)Coming soon

Quick check: Responsive design

Question 1 of 3

On your phone, you have to scroll sideways to read a page. What's missing?

On your phone, you have to scroll sideways to read a page. What's missing?