⬅️ On a desktop or laptop: grab the right edge of your browser window and drag it narrower — watch the boxes reflow as the screen width changes.
Drag your browser narrower to see the blocks reflow ↑
This shows you how content reflows inside a grid from top to bottom and from right to left. Content on the far right gets pushed underneath and to the left when the screen gets slimmer.
How the layout changes at each screen width:
1280px and above (wide desktop):
1 2 3 4 5
Desktop (940–1279px):
1 2 3 4
5
Tablet (640–939px):
1 2 3
4 5
Landscape mobile (480–639px):
1 2
3 4
5
Mobile portrait:
1
2
3
4
5
Notice how box 4 drops down underneath box 1 when moving from desktop to tablet width. The content always reflows right-to-left, top-to-bottom.
Grab your phone and visit artfuly.com/design-resources/responsive-design-explained to see the mobile layout for yourself.
This video shows how a fluid grid reflows from desktop to tablet to mobile — watch from 4 to 6 minutes only.
And here's a great tool to see responsive design in action: Am I Responsive? — it shows how any website looks simultaneously on desktop, laptop, tablet, and phone in one view. Just scroll down to enter the website you want to view (I've used my own folio as the example here).
Hopefully you now have a basic idea of how content reflows for different screen sizes, which will help you think through your designs in Figma.
Earn from your design skills
Create & sell patterns for fabric, wallpaper & murals — on Spoonflower & beyond. Client-free, commute-free, creative work you can do from anywhere.
See the book →
Blue-sky thinking — starting from an unconstrained, root-cause view of the problem — is the step most UX process skips. Here's how to use it, with a real health-app example and a way to run it yourself.
My portfolio lived on Webflow for four years. The rebuild — same brand, sharper site — took days, using one free export tool and a documented design system. Here's the order that actually works, and the one thing I'd do differently.
Most multi-brand design system advice quietly stops working around brand five or six. Here's the token architecture, component pattern, and governance structure that holds up at 8+ brands.
Keep your design skills up to date with videos,
AI workflows, tutorials, ways to earn $$$ and free resources.
See past email newsletters.
Unsubscribe anytime.
