Responsive Design
At mobile width, change three columns to one while keeping the desktop navigation and card layout intact.
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'.
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.
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Three desktop product-card columns make text cramped and buttons too small at 390px. What change should be proposed first?
ANS Original Methods