Use breakpoints to refine, not redesign

You’ve seen how styles and layout changes behave across breakpoints. Now it’s time to think like a designer working responsively. Use breakpoints to make small, intentional changes that help your layout work better for each screen size.

Common reasons to adjust:

• A layout feels too cramped or stretched
• Text becomes hard to read
• Side-by-side content needs to stack
• Buttons or links are too small to tap easily
• Images overflow or don’t scale well

For example: A product image and description might sit side by side on desktop. On mobile, stacking them vertically can improve readability and layout flow.

Make adjustments with purpose

Start with your desktop layout as your foundation. Then move through smaller breakpoints and ask:

• Is this still readable and usable?
• Does the layout feel balanced?
• Are interactions (like buttons or links) easy to use on smaller screens?

If the answer is yes — leave it. If not, tweak it.

How to know when a style is inherited

In the Style panel, each style property tells you where it comes from:

• Amber label = the value is inherited from another breakpoint or class
• Blue label = the value is set directly on the current breakpoint
• Click the label to see where a style is coming from or reset it back to the inherited value

Tip: Look for the breakpoint icon next to the label for additional clues on where the style comes from. 

Adjusting vs. over-adjusting

Make only the changes that are truly needed. Too many overrides can make your layout harder to manage later.

Best practices:

• Keep spacing and alignment consistent across breakpoints
• Use relative units like rem, %, or vw for more flexible adjustments
• Let your layout adapt. It’s okay (and often better) for content to stack or shift on smaller screens.
• Preview your site frequently to catch layout issues early

Think from the user’s perspective. Designing responsively is all about the person visiting your site. What do they need to see? What actions should be easy to take? If something feels hard to read or interact with on a smaller screen, that’s a signal to tweak the design — not start over, just refine.

Feeling good?

Next, we’ll look at how to set up your layout for success from the start and avoid common responsiveness headaches later.