Mobile Responsive Design

Tell the AI to prioritize mobile:

"Build this mobile-first, then adapt for larger screens"

Mobile-first often produces cleaner, more focused designs.

Looops uses standard breakpoints:

Test different sizes in the preview panel:

1. Click the device icons in the preview toolbar
2. Switch between desktop, tablet, and mobile views
3. Check that all content is accessible

• Text doesn't overflow
• Images don't stretch
• Navigation is usable
• Buttons are tap-friendly (min 44px)
• Forms are easy to fill

Mobile-friendly navigation:

"On mobile, convert the header navigation to a hamburger menu"

"Make the mobile menu full-screen with large touch targets"

Responsive images:

"Make images responsive—full width on mobile, contained on desktop"

"Use smaller image sizes on mobile for faster loading"

Readable text sizes:

"Reduce heading sizes on mobile—H1 should be 32px instead of 48px"

"Increase body text line-height on mobile for better readability"

Flexible layouts:

"Stack the feature cards vertically on mobile, 3-column grid on desktop"

"Hide the sidebar on mobile, show it on tablet and up"

Make buttons easy to tap:

"Ensure all buttons are at least 44px tall on mobile"

"Add more padding to links in the mobile menu"

Adequate spacing between elements:

"Increase spacing between form fields on mobile"

"Add more margin between sections on mobile"

Mobile users often have slower connections:

"Lazy load images below the fold"

"Use WebP format for better compression"

Some users prefer reduced motion:

"Respect the prefers-reduced-motion setting"