AI Prompts for Mobile Fixes
Here are ready-to-use prompts for fixing common mobile issues. Copy and paste these into the AI chat to fix your components.
Layout Fixes
Columns Not Stacking
``
Make this stack into a single column on mobile devices
`
`
Change the layout to 1 column on mobile, 2 on tablet, 3 on desktop
`
`
Stack these items vertically on screens smaller than 768px
`
Content Too Wide
`
Fix the horizontal overflow on mobile - content shouldn't scroll sideways
`
`
Make this section fit within the mobile screen width
`
Grid Issues
`
Make this grid 1 column on mobile, 2 columns on tablet, 4 columns on desktop
`
`
Reduce the grid columns on smaller screens so items don't get too small
`
Text & Typography Fixes
Text Too Small
`
Increase the font size on mobile for better readability
`
`
Make the body text at least 16px on mobile devices
`
Heading Too Large
`
Scale down the heading size on mobile so it doesn't take up too much space
`
`
Use responsive font sizing - smaller on mobile, larger on desktop
`
Line Length
`
Limit the line length on mobile for easier reading
`
Spacing Fixes
Too Much Padding
`
Reduce the padding on mobile devices
`
`
Make the padding smaller on mobile: 16px instead of 48px
`
Not Enough Space
`
Add more vertical space between sections on mobile
`
`
Increase the gap between items on mobile for better touch targets
`
Margin Issues
`
Remove the side margins on mobile so content uses full width
`
Button & Interactive Fixes
Buttons Too Small
`
Make all buttons at least 44px tall for easy tapping on mobile
`
`
Increase button size and padding on mobile devices
`
Buttons Too Close Together
`
Add more space between clickable elements on mobile
`
`
Stack buttons vertically on mobile instead of side by side
`
Full-Width Buttons
`
Make buttons full-width on mobile for easier tapping
`
Image Fixes
Image Too Small
`
Make images full-width on mobile devices
`
Image Cropping Wrong
`
Change the image aspect ratio on mobile so it's not cut off
`
`
Show the full image on mobile instead of cropping it
`
Side-by-Side Images
`
Stack images vertically on mobile instead of side by side
`
Navigation Fixes
Nav Too Crowded
`
Hide secondary nav items on mobile and show only essential links
`
Logo/Menu Issues
`
Make the logo smaller on mobile so it doesn't overlap with other elements
`
Visibility Fixes
Hide on Mobile
`
Hide this element on mobile devices to simplify the layout
`
`
Only show this section on desktop, hide it on mobile and tablet
`
Show Different Content
`
Show a simplified version of this section on mobile
`
`
Display only the first 3 items on mobile, show all 6 on desktop
`
Making Properties Editable
For ongoing flexibility, ask AI to make responsive properties editable:
`
Make the number of columns editable with options for mobile, tablet, and desktop
`
`
Let me control the padding separately for mobile and desktop from settings
`
`
Add a toggle to show/hide this element on mobile
`
Complete Fix Prompts
General Mobile Fix
`
This component looks bad on mobile. Please fix the responsive layout: stack columns, reduce padding, and ensure text is readable on small screens.
`
Comprehensive Responsive Fix
`
Make this fully responsive:
- Desktop: 3 columns, large padding
- Tablet: 2 columns, medium padding
- Mobile: 1 column, small padding, larger touch targets
``
Pro Tip
After pasting any of these prompts, add specific details about your component:
"[Paste prompt] - specifically, the testimonial cards are overlapping and the quote text is too small"
The more context you give, the better the fix!