Spacing for Each Width
The layout of the page now works at every width, so let's look at the details. A phone's screen is small, and spacing that looks airy on a computer only takes up room on a phone. The hero has py-24, 96 px above and below its content, so on a phone, there's a lot of empty space around a short text.
A prefix works with every Tailwind class, not just with the layout: with spacing, sizes, colors and fonts too. The approach is the same as with the headline: smaller spacing without a prefix, and bigger spacing with the prefix md:. For example:
<section class="px-4 py-12 md:px-8 md:py-24">On a phone, this section has 16 px of padding on the sides and 48 px at the top and bottom, and from 768 px up, 32 px and 96 px. Each class with a prefix changes only its own property: md:py-24 changes the padding at the top and bottom and leaves the sides to px-4 and md:px-8.
The size of text changes the same way, as you saw with the headline: text-4xl md:text-6xl.
Instructions
In the hero (the section with the headline), change py-24 to py-12 and add the class md:py-24.
The header and the sections Our Cats and How to Adopt have px-8, 32 px on each side. On a phone, half is enough: in each of these three elements, change px-8 to px-4 and add the class md:px-8. At 375 px, the cards and the steps get a bit wider.
Start programming for free
5/7