Mobile Display Issues

Your landing page doesn't look right on mobile devices? This guide helps you fix layout, sizing, and interaction issues for mobile visitors.

Troubleshooting Mobile Display Issues

Layout Broken on Mobile

The page layout is misaligned, overlapping, or stacking incorrectly on mobile devices.

This typically occurs when desktop-optimized layouts don't adapt to narrow screen widths.

Solution:

1. Click the Mobile view toggle in the preview toolbar
2. Test at different mobile widths (320px, 375px, 414px)
3. Identify elements that are overlapping or misaligned
4. Ask the AI: "Make this section stack vertically on mobile"
5. Change row layouts to column layouts for narrow screens
6. Replace fixed-width elements with percentage-based widths
7. Use max-width: 100% instead of fixed pixel widths

Text Too Small or Large

Font sizes aren't appropriate or readable on mobile screens.

This happens when desktop font sizes don't scale properly for mobile viewports.

Solution:

1. Switch to Mobile view in the preview toolbar
2. Check if text is readable without pinch-to-zoom
3. Access the Theme Editor to adjust base typography scales
4. Ask the AI: "Reduce heading sizes for mobile screens"
5. Test on actual physical devices when possible (browser simulation may differ)
6. Use responsive font size units that scale with viewport width
7. Ensure body text is at least 16px to prevent mobile browser auto-zoom

Images Not Scaling

Images overflow their containers or don't fit properly on mobile.

This occurs when images have fixed dimensions or lack responsive constraints.

Solution:

1. Ask the AI: "Make all images responsive and fit their containers"
2. Ensure images have max-width: 100% and height: auto properties
3. Check that parent containers don't have fixed widths
4. Consider using different aspect ratios for mobile layouts
5. Use the Image settings in design mode to adjust sizing
6. Verify container constraints allow images to shrink
7. Test with various image sizes to ensure consistent behavior

Touch Targets Too Small

Buttons and links are difficult to tap accurately on touchscreens.

This happens when interactive elements don't meet minimum touch target size requirements.

Solution:

1. Ensure all buttons are at least 44x44 pixels (Apple's minimum recommendation)
2. Add padding to small buttons to increase tap area
3. Leave at least 8-10px spacing between interactive elements
4. Test tap targets in Mobile preview by clicking with precision
5. Ask the AI: "Increase button padding for better mobile usability"
6. Review button placement to avoid accidental taps
7. Use larger font sizes for link text to increase clickable area

Horizontal Scroll Appearing

The page has unwanted horizontal scrolling on mobile devices.

This occurs when elements are wider than the viewport width.

Solution:

1. Press F12 and toggle device emulation to mobile
2. Use the Elements inspector to find elements wider than 100vw
3. Look for fixed-width elements (e.g., width: 600px)
4. Replace fixed widths with max-width: 100% or percentage values
5. Check for excessive padding or margins pushing content beyond viewport
6. Add overflow-x: hidden to the body as a temporary fix (but find root cause)
7. Ask the AI: "Fix horizontal scrolling on mobile by making all elements responsive"

Content Hidden on Mobile

Elements visible on desktop are missing on mobile screens.

This happens when CSS hides content for mobile, or positioning moves elements off-screen.

Solution:

1. Check if elements have display rules that hide them on mobile
2. Look for overflow: hidden on parent containers that may clip content
3. Inspect element positioning (absolute positioning can move elements off-screen)
4. Use browser developer tools to verify element dimensions and location
5. Review responsive visibility settings in design mode
6. Change absolute positioning to relative for mobile layouts
7. Ask the AI: "Make this element visible on mobile devices"

Forms Difficult to Use on Mobile

Form inputs are hard to tap, type in, or navigate on touchscreens.

This occurs when form fields are too small, lack proper spacing, or use incorrect input types.

Solution:

1. Increase input field heights to at least 44px for easy tapping
2. Add 12-16px margins between form fields
3. Ensure form fields have proper type attributes (email, tel, number)
4. Use appropriate inputmode to trigger correct mobile keyboards
5. Make labels tap-friendly by increasing their clickable area
6. Group related fields with clear visual separation
7. Test the complete form flow on a mobile device before publishing

Mobile Testing Checklist

Before publishing, verify these mobile requirements:

• Layout stacks properly on narrow screens (320px-428px)
• Text is readable without pinch-to-zoom (minimum 16px body text)
• Images scale within containers and don't overflow
• Buttons and links meet 44x44px minimum size
• No unwanted horizontal scrolling
• Forms are easy to complete on touchscreens
• Page loads quickly on mobile networks

FAQ

Related Resources

• Design Mode Overview
• Device Preview
• Styling Not Applying