Responsive Design

You might say

At mobile width, change three columns to one while keeping the desktop navigation and card layout intact.

Responsive design is the practice of adapting one interface's layout and interaction to available space and device capabilities.At 1440px, a site may show three card columns and full navigation; at 390px, it can use one column, larger touch targets, and collapsed secondary navigation. Breakpoints and media queries are common tools. The goal is not proportional desktop shrinkage but readable, tappable, completable tasks.

Know first

Flex Grid

Responsive Web Design

How the same content reflows at 1440px and 390px

1440 px

VibeHub

Course 1

Course 2

Course 3

How responsive design preserves a task

Start with space and interaction: A narrow screen is not merely smaller: line length, touch targets, sidebars, and tables may need reflow. Keep the information and actions required for the current task first.

Rules switch the layout: A breakpoint is a threshold for switching rules, and a media query is CSS syntax for expressing the condition. For example, paste this into project CSS: @media (max-width: 720px) { .cards { grid-template-columns: 1fr; } }.

Quick checkChoose the best answer

Three desktop product-card columns make text cramped and buttons too small at 390px. What change should be proposed first?

Use one or fewer columns at mobile width and check that title, price, and button remain readable and tappableScale down the entire desktop page proportionally; three columns must stay unchangedHide the title and purchase button, leaving only images to avoid crowding

You can say this to an AI Agent

In the project CSS, add `@media (max-width: 720px)` for the card area: use one column on mobile while keeping the existing three columns on desktop. Check 390px and 1440px afterward and confirm titles, prices, buttons, and long text are not cramped or horizontally overflowing.

Learn next

1Top Nav→2Card Grid→