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

CSS Media QueryResponsive Web DesignBreakpoint

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; } }.

Use browser to simulate mobile views: You don't need a real phone to check mobile layout. In Chrome DevTools, press Cmd+Shift+M (Mac) or Ctrl+Shift+M (Windows) to toggle device simulation. You can select common phone sizes like iPhone 14 or Samsung Galaxy. This is the most important verification step after any layout change - always check both desktop and mobile views before telling the AI you're satisfied. Additionally, Tailwind CSS uses responsive prefixes like sm:, md:, lg: to apply styles at different screen widths, so when AI writes md:grid-cols-3, it means 'use 3 columns from medium screens and up'.

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?

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

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→

Want GPT or Codex?VibeHubGPT support

GPT-6 Astra

Build in 3D. Put your computer to work.