Making websites responsive is a skill learned through repetition and experience.
Over the years, I've learned that a key aspect of making a website responsive is to use max-width containers along with padding. This isn't to make websites mobile response, but rather, desktop responsive instead.
The main reason for using a max-width container is to contrain the design to certain widths (your breakpoints).
In TailwindCSS, we have the following breakpoints:
- sm: 640px
- md: 768px
- lg: 1024px
- xl: 1280px
- 2xl: 1536px
How Tailwind came up with these breakpoints doesn't actually matter, what does matter is that your design is constrained to these widths for a given device.
What does that actually mean? It means that if we're on a tablet, we'll only ever get a container that is 768px, if we're on a laptop, we'll get a container that's 1280px. Nothing bigger, nothing smaller.
So that's fine, but what happens to our website if we're on a device that is exactly 1280px, 768px, etc.?
Well, we get a design that looks something like this:
To fix this, we need to make use of padding. Padding helps account for additional around our container, ensuring our design always has negative margins around the container (thus site content doesn't touch the edges of the page).
This how I like to structure that:
<section id="..." class="p-6">
<div class="container mx-auto">...</div>
</section>Typically I'll use p-6 but sometimes, depending on design, I'll switch to p-10 if I want a more spacious design.
