Summary

In this lesson, you made the shelter's home page responsive, and you learned that:

• A responsive page adapts its layout to the width of the screen. In the bar above the preview, you can see a page as wide as a phone (375 px), a tablet (768 px) or a computer (1280 px).
• Every responsive page needs <meta name="viewport" content="width=device-width, initial-scale=1"> in head. Without it, phones lay the page out as if their screen were about 980 px wide.
• In CSS, styles meant only for some widths are written in a media query: @media (width >= 48rem) { ... }. In Tailwind, you put a prefix in front of a class instead: md:text-6xl.
• A class without a prefix applies at every width, a class with a prefix from its breakpoint up: sm: from 640 px, md: from 768 px, lg: from 1024 px, xl: from 1280 px and 2xl: from 1536 px.
• Mobile first: style the page for a phone with classes without prefixes, then add classes with prefixes for what changes on wider screens.
• One element can have classes for several breakpoints, such as grid-cols-1 sm:grid-cols-2 lg:grid-cols-4. When several of them apply, the one for the widest screen wins.
• flex-col md:flex-row puts elements one under another on a phone and side by side from 768 px up.
• hidden md:flex shows an element only from 768 px up, and md:hidden only below 768 px.
• Spacing and text sizes can change with the width too: py-12 md:py-24, text-4xl md:text-6xl.
• mx-auto max-w-5xl on the element with the content keeps it from spreading across a wide screen, while the section's background still fills the whole width.

In the next lesson, Dark Mode, you'll give the shelter's website dark colors for everyone who prefers them, and a button that switches between the light and the dark look.

To practice, here's a new piece of the website: a bigger footer with the shelter's name, address and a Donate button. Like the home page at the start of this lesson, it's laid out for a computer only: on a phone, its three columns are squeezed side by side.