Optimizing AI Components for Mobile

AI components are designed to be responsive by default, but sometimes they need fine-tuning for smaller screens. Here's how to check and improve mobile layouts.

Checking Mobile Layout

Using Device Preview

Look in the top-right of the header bar for device icons

Click the phone icon for mobile view

Click the tablet icon for tablet view

Click the desktop icon to return to full width

Always preview your site on all three sizes after adding or modifying components.

Common Mobile Issues

• Text too small or too large
• Columns not stacking properly
• Elements overlapping
• Buttons too small to tap
• Images stretching or cropping badly
• Too much empty space or too cramped

Fixing Mobile Layouts with AI

Making Columns Stack on Mobile

If a multi-column layout doesn't stack on phones:

"Make this stack into a single column on mobile"

"On mobile, display these items vertically instead of horizontally"

"Change to 1 column on mobile, 2 on tablet, 3 on desktop"

Fixing Text Sizes

"Make the heading smaller on mobile"

"Increase the body text size for mobile readability"

"Use responsive text that scales with screen size"

Adjusting Spacing

"Reduce the padding on mobile"

"Add more space between items on desktop, less on mobile"

"Make the gap smaller on mobile devices"

Fixing Image Sizing

"Make the image full-width on mobile"

"Resize images to fit mobile screens"

"Stack images vertically on mobile instead of side by side"

Prompt Templates for Mobile

For New Components

When creating a component, include mobile instructions upfront:

"Create a 3-column feature section that stacks to 1 column on mobile. Use larger touch-friendly buttons and ensure text is readable on small screens."

"Design a pricing table with 3 plans. On mobile, stack them vertically with clear separation between each plan."

"Build a testimonial carousel that shows 3 cards on desktop, 2 on tablet, and 1 on mobile."

For Fixing Existing Components

Layout Issues:

• "Fix the mobile layout - columns should stack vertically"
• "The cards overlap on tablet view, fix the spacing"
• "Make this responsive - it breaks on small screens"

Sizing Issues:

• "The buttons are too small to tap on mobile, make them larger"
• "Text is too big on mobile, scale it down appropriately"
• "Image is being cut off on mobile, fix the aspect ratio"

Spacing Issues:

• "Too much padding on mobile, reduce it"
• "Items are too cramped on tablet, add more breathing room"
• "The gap between sections is too large on mobile"

Making Responsive Properties Editable

For maximum flexibility, ask AI to make responsive values adjustable:

"Make the number of columns editable: 1 for mobile, 2 for tablet, 3 for desktop"

"Let me adjust the padding separately for mobile and desktop"

"Make the font size configurable with different values for each breakpoint"

"Add settings to control the gap between items at different screen sizes"

Best Practices

Test All Breakpoints

Desktop (default) - Check the full layout

Tablet - Check intermediate behavior

Mobile - Check smallest screen experience

Prioritize Mobile Content

On mobile, important content should appear first:

• "Move the call-to-action button higher on mobile"
• "Show only the most important features on mobile"
• "Hide secondary images on mobile to save space"

Touch-Friendly Design

Mobile users tap, not click:

• "Make all buttons at least 44px tall for easy tapping"
• "Add more space between clickable elements on mobile"
• "Make the navigation menu mobile-friendly"

Readable Text

Mobile screens are small:

• "Ensure body text is at least 16px on mobile for readability"
• "Limit line length on mobile for comfortable reading"
• "Use higher contrast colors for mobile visibility"

Common Fixes Quick Reference

When to Hide Content on Mobile

Sometimes the best mobile experience means showing less:

"Hide this decorative image on mobile"

"Show a simplified version of this section on mobile"

"Only display the first 3 items on mobile, all 6 on desktop"

Use the "Show on mobile" toggle in component settings (available for images, videos, and grids) to hide specific elements on smaller screens.

Testing on Real Devices

After using the device preview:

Publish your site (or use Preview)

Open on your actual phone

Test all interactions and scrolling

Check loading performance

Verify forms work correctly

The in-editor preview is helpful, but real device testing catches issues the preview might miss!