การทำให้รองรับทุกหน้าจอ

Your users are on phones, tablets, and laptops. A design that looks stunning on your big monitor can be a cramped, broken mess on a phone. Responsive design means it adapts to any screen size gracefully.

The good news: you can make it responsive entirely by prompt. This lesson shows you how to ask for it — and how to spot and fix layout problems on small screens.

The modern best practice is mobile-first: design for the small screen first, then expand for larger ones. Phones force you to prioritize what truly matters.

Tell the AI to start mobile-first and it'll build layouts that scale up cleanly instead of cramming a desktop design onto a phone.

A breakpoint is a screen width where your layout shifts — for example, a 3-column grid collapses to 1 column on phones. Common breakpoints are roughly phone (under 640px), tablet (768px), and desktop (1024px+).

You can name these in plain English; the AI maps them to the right Tailwind sizes.

In the code, Tailwind uses prefixes like md: and lg: to apply styles at certain widths. grid-cols-1 md:grid-cols-2 lg:grid-cols-3 means: 1 column by default, 2 on medium screens, 3 on large.

You won't write much of this by hand, but recognizing it helps you give precise feedback.

Navigation is the classic responsive challenge. A row of links that fits on desktop won't fit on a phone. The standard solution: collapse them into a hamburger menu on small screens.

Ask for it explicitly and the AI handles the toggle behavior too.

Choosing a layout is really just checking the screen width and picking a column count. Here's a tiny JavaScript model of that logic — run it to see how different widths map to different layouts.

Fixed widths like width: 600px break on small screens. Responsive designs use relative units — percentages, max-width, and flexible grids — so elements shrink and grow with the screen.

If something overflows off the edge on mobile, it's usually a fixed width. Just ask the AI to make it fluid.

Fingers are bigger than mouse cursors. Buttons and links that work on desktop can be too small and too close together on a phone. The rule of thumb: tap targets at least ~44px tall with enough spacing.

Ask the AI to make interactive elements touch-friendly for a mobile-grade experience.

Tools like v0, Lovable, and Bolt let you preview your UI at phone, tablet, and desktop widths. Always check all three before you're happy.

In a browser, you can also open DevTools (F12) and use the device toolbar to test sizes. Seeing the breakpoints in action is the fastest way to catch problems.

When you spot a problem on a screen size, describe it precisely: which screen, which element, what's wrong. Specific bug reports get specific fixes.

Treat the AI like a developer you're handing a QA note to.

Take a page you've built and run it through the responsive loop: prompt for mobile-first, set breakpoints for the grid, collapse the navbar, then preview at all three sizes and fix anything that breaks. Responsiveness is a habit — bake it into every UI prompt from now on.

What does a breakpoint do in a responsive design?

You learned to make designs adapt to any screen by prompt: go mobile-first, set breakpoints for grids and navbars, use fluid sizes instead of fixed widths, and make tap targets touch-friendly. Always preview at phone, tablet, and desktop, and report responsive bugs precisely.

That completes Designing UIs by Prompt — you can now describe, generate, style, theme, and make responsive any interface using nothing but words and tools like v0 and Lovable. Go build something beautiful.