How to Write CSS That Actually Works on Every Screen

Most responsive design problems come from the same mistake: designing for desktop first, then trying to cram it into a phone. Flip that. Start with the smallest screen, then add complexity as space allows. This guide teaches you the patterns that actually work.

Step 1: Understand the Mobile-First Mindset

Mobile-first means your base CSS — without any media queries — targets small screens. Media queries then add layout rules for larger screens.

Why min-width instead of max-width? Because you are building up from the simplest layout. The mobile layout is the foundation. Every min-width query adds a layer of complexity that only activates when the screen can handle it.

Common breakpoints to memorize:

• 640px — large phones
• 768px — tablets
• 1024px — small laptops
• 1280px — desktops

You do not need all four. Most layouts only need two or three breakpoints.

Step 2: Build Flexible Layouts with Flexbox

Flexbox handles one-dimensional layouts — a row of buttons, a navigation bar, a card with an image and text side by side.

Here is a card component that places the image above text on mobile, beside it on larger screens:

Key flexbox properties to know:

• flex-direction — row or column
• justify-content — spacing along the main axis
• align-items — alignment on the cross axis
• flex-wrap: wrap — allow items to flow to the next line
• gap — spacing between items (cleaner than margins)

Step 3: Build Two-Dimensional Layouts with CSS Grid

Grid handles layouts where you care about rows and columns simultaneously — page layouts, dashboards, image galleries.

Grid shines for auto-filling content to whatever space is available:

That single rule creates a responsive grid with no media queries at all. Each card will be at least 280px wide. The browser figures out how many columns fit and distributes the remaining space evenly.

Step 4: Handle Typography and Spacing

Text that looks good on a monitor becomes unreadable on a phone if you use fixed sizes. Use clamp() for fluid typography:

clamp(minimum, preferred, maximum) smoothly scales the value between your minimum and maximum based on viewport width. No breakpoints needed.

For spacing, use relative units:

Two more rules that prevent layout breakage on small screens:

The max-width: 100% rule prevents media from overflowing its container. box-sizing: border-box makes padding and borders count toward an element's declared width instead of adding to it.

Step 5: Test Your Work Properly

Chrome DevTools device mode is a starting point, not a finish line.

1. Open DevTools (Cmd+Shift+I or F12).
2. Click the device toggle icon (or press Cmd+Shift+M).
3. Do not just pick "iPhone 14" and call it done. Drag the viewport width from 320px to 1400px and watch what happens. Breakage usually occurs between your breakpoints, not at them.

Things to check at every width:

• Text overflow — Does any text get cut off or overflow its container?
• Horizontal scroll — Is there any horizontal scrollbar? There should not be.
• Tap targets — Are buttons and links at least 48px tall on touch screens?
• Images — Do they scale down or do they push the layout wider?
• Readability — Is the line length between 45-75 characters?

Test on real devices when you can. Simulators miss things like how fat a thumb is compared to a cursor, how bright the sun makes screens outdoors, and how slow a 3G connection makes your page feel.

A quick responsive checklist before shipping:

Responsive design is not about making things look identical on every screen. It is about making every screen usable. A single-column layout on mobile is not a compromise — it is the correct design for that context.