Breakpoint

Breakpoints are the few numbers that say "once the screen is this wide, the layout changes." A common set is 640px (large phones), 768px (tablets), 1024px (small laptops), and 1280px (desktops). In Tailwind these are sm, md, lg, and xl, and md:grid-cols-2 means "show two columns at 768px and up."

A breakpoint is a value, a Media Query is the CSS syntax for writing conditions with those values, and Responsive Design is the end goal. Telling AI "switch to one column below the md breakpoint" or "switch to one column when the width is under 768px" is clear, and works much better than "make it look better on phones."

A better way to pick breakpoints is to look at the content. Slowly drag the browser window narrower, and switch wherever it starts to get cramped. Keep breakpoints consistent across a project. Don't give every component its own set.