Your website looks brilliant on your laptop. Professional. Polished. Exactly what you envisioned.
Then you check it on your phone—and your stomach drops.
Text is microscopic. Images overflow the screen. Buttons are impossible to tap without accidentally hitting three other things. The navigation menu has vanished entirely. Visitors have to pinch, zoom, and scroll sideways just to read your business name.
Here's the uncomfortable truth: over 60% of web traffic now comes from mobile devices. If your site looks broken on a phone, you're turning away the majority of your potential customers before they've read a single word.
The good news? You don't need to rebuild your entire website. Most mobile display problems come down to three fixable issues: layout overflow, unreadable text, and buttons that are too small to tap accurately. This guide walks you through fixing all three, using the tools already built into your website platform.
This happens after completing your core content and having completed a cross-device test where you identified specific mobile problems.
Quick Navigation:
- •Quick Start (15 Minutes) – Fix the most critical issues immediately
- •Complete Guide – Detailed walkthrough of all three problem areas
- •Troubleshooting – Solutions to common mobile editing problems
Quick Start: Fix Mobile Layout Issues (15 Minutes)
This builds on having completed a cross-device test where you documented exactly what's broken. Now you'll fix it.
The Five Critical Checks
1. Activate Mobile View in Your Editor
Depending on your chosen website platform, the location varies:
- •WordPress: Customiser → Additional CSS or theme mobile settings
- •Squarespace: Design → Mobile Styles
- •Wix: Switch to mobile editor view (top toolbar)
- •Shopify: Theme customiser → Mobile preview toggle
2. Check for Horizontal Scrollbars (Overflow)
Load your homepage in mobile view. Can you scroll sideways? If yes, you have overflow—usually caused by an image, table, or container with a fixed pixel width that's wider than the phone screen. Find it and set it to 100% width instead.
3. Adjust Mobile Font Size to 16px Minimum
Check your body text size. If it's smaller than 16px, visitors will struggle to read without zooming. Most platforms have a global mobile typography setting—change it there first rather than editing individual text blocks.
4. Ensure Buttons Are Tappable
Tap your main call-to-action button with your thumb. Did you accidentally hit something else? Buttons need to be at least 48x48 pixels with adequate spacing around them. Check your button settings and increase padding if needed.
5. Test the Mobile Navigation Menu
Does your hamburger menu icon appear? Does it open when tapped? Can you navigate to all main pages? If not, check your theme's mobile header settings—many require you to explicitly enable the mobile menu.
✅ Completed the quick version? Move on to Improve Your Website Speed or continue below for the detailed walkthrough that addresses edge cases and ensures comprehensive mobile optimisation.
Complete Step-by-Step Guide: Making Your Website Mobile-Friendly
This section addresses the three core mobile display problems in detail, with platform-specific instructions and solutions for common complications.
Problem Area 1: Eliminating Horizontal Overflow (The #1 Mobile Killer)
Horizontal overflow—when content is wider than the screen—is the single most damaging mobile usability error. It forces visitors to scroll sideways to read, which feels broken and unprofessional.
Step 1: Identify the Overflow Source
Open your site on a phone or in browser mobile simulation. Scroll through each page. When you find horizontal scrolling, you need to identify which element is causing it.
In Chrome DevTools:
- Right-click → Inspect
- Toggle device toolbar (Ctrl+Shift+M / Cmd+Shift+M)
- Select mobile device preset
- Use the element selector to hover over page sections
- Look for elements with width values exceeding 100vw (viewport width)
Common culprits:
- •Images with fixed pixel widths (e.g., `width: 800px`)
- •Tables without responsive styling
- •Embedded content (videos, maps) without wrapper containers
- •Pre-formatted code blocks
- •Full-width containers with added padding that pushes total width beyond 100%
Example of Horizontal Overflow (The Mobile Display Killer)
Step 2: Fix Image Overflow
For images causing overflow, you need to set them to scale with the container:
- •WordPress (Block Editor): Select image → Settings panel → Set width to 100% (or leave blank for auto)
- •Squarespace: Image block settings → Sizing → Width: Auto or 100%
- •Wix: Select image → Stretch to fit container width
- •Custom CSS solution (any platform):
img {
max-width: 100%;
height: auto;
}
This ensures images never exceed their container width whilst maintaining aspect ratio.
Step 3: Fix Table Overflow
Tables are notoriously problematic on mobile. Solutions:
- •Best option: Redesign as a list or card layout for mobile
- •Quick fix: Wrap table in a scrollable container:
<div style="overflow-x: auto;">
<table>...</table>
</div>
- •WordPress plugin: WP Responsive Table (adds horizontal scroll to tables only)
Problem Area 2: Making Text Readable
Step 4: Set Minimum Font Size (16px for Body Text)
Text smaller than 16px triggers automatic zoom on iOS Safari, creating a jarring user experience. Understanding mobile-first design philosophy helps explain why this standard exists.
Platform-specific instructions:
WordPress (with theme customiser):
- Appearance → Customise → Typography
- Find "Mobile Font Size" or "Base Font Size"
- Set body text to minimum 16px
- Set headings proportionally (H1: 28-32px, H2: 24-28px, H3: 20-24px)
Squarespace:
- Design → Site Styles → Fonts
- Scroll to mobile font size controls
- Adjust body text to 16px minimum
Wix:
- Switch to mobile editor
- Select text element
- Change font size in top toolbar
- Repeat for each text type (unfortunately Wix requires individual adjustment)
Custom CSS (any platform):
@media (max-width: 768px) {
body {
font-size: 16px;
}
h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
}
Comparing 12px (Bad) vs 16px (Good) Mobile Font Size
Identifying hidden horizontal scrollbars and calculating touch target proximity across every page can be tedious. NetNav automatically flags common mobile usability errors like small text and touch target proximity across your entire site, saving you manual screen checking.
Step 5: Adjust Line Height and Spacing
Readable mobile text needs breathing room:
- •Line height: 1.5 to 1.6 (multiply font size by this number)
- •Paragraph spacing: 1em between paragraphs
- •Margin around headings: 1.5em above, 0.5em below
Most modern themes handle this automatically, but if text feels cramped, add this CSS:
@media (max-width: 768px) {
p {
line-height: 1.6;
margin-bottom: 1em;
}
}
Problem Area 3: Ensuring Tappable Targets
Step 6: Apply the 48x48 Pixel Rule
Apple's Human Interface Guidelines and Google's Material Design both recommend minimum touch target sizes of 48x48 pixels. Smaller targets lead to mis-taps and user frustration.
This also relates to addressing basic accessibility standards, as adequate touch targets benefit users with motor control difficulties.
Check your buttons:
- Inspect your primary CTA button in mobile view
- Check computed dimensions (DevTools → Computed panel)
- If either dimension is below 48px, increase padding
Platform adjustments:
WordPress (Block Editor):
- •Select button block
- •Settings panel → Dimensions
- •Add padding: 12px top/bottom, 24px left/right minimum
Squarespace:
- •Design → Site Styles → Buttons
- •Adjust padding values in mobile view
Wix:
- •Select button in mobile editor
- •Drag to resize or adjust padding in settings panel
Custom CSS:
@media (max-width: 768px) {
.button, .btn, a.cta {
min-height: 48px;
min-width: 48px;
padding: 12px 24px;
}
}
Step 7: Check Touch Target Spacing
Buttons also need space around them. Minimum 8px gap between tappable elements prevents accidental mis-taps.
Common problem: Navigation menu items too close together. Fix by increasing padding or switching to a vertical mobile menu layout.
Clickable Target Spacing (The 48x48px Area Rule)
Final Verification Steps
Step 8: Test Across Multiple Devices
Don't rely on a single device or simulator. Test on:
- •At least one iOS device (iPhone)
- •At least one Android device
- •Both portrait and landscape orientations
Borrow devices from friends or family if needed. Device labs and browser testing services exist, but physical devices reveal real-world issues simulators miss.
Step 9: Run Google Mobile-Friendly Test
- Visit Google's Mobile-Friendly Test
- Enter your URL
- Review results and screenshot
- Address any flagged issues
This test checks:
- •Viewport configuration
- •Text readability
- •Touch target sizing
- •Content width
- •Mobile-friendly resources
Step 10: Check Mobile Navigation Functionality
Your mobile menu is critical. Test thoroughly:
- •Does the hamburger icon appear?
- •Does it open when tapped?
- •Can you navigate to all main pages?
- •Does the menu close after selecting a page?
- •Are submenu items accessible?
If the mobile menu doesn't appear, check your theme settings—many require explicit activation of the mobile header. This is separate from your desktop navigation settings.
Step 11: Optimise Images for Mobile Display
Beyond preventing overflow, images should load efficiently. When fixing broken images, also check file sizes.
Quick optimisation:
- •Use appropriate dimensions (no larger than 1200px wide for full-width mobile images)
- •Compress images (TinyPNG, Squoosh, or built-in platform compression)
- •Consider WebP format for better compression
- •Use lazy loading (most modern platforms enable this by default)
For optimising simple graphics created in Canva, export at 2x resolution but compress before uploading.
Step 12: Review Mobile Header and Branding
Your logo and header need special attention on mobile:
- •Logo should be visible but not dominate the screen (max 60px height)
- •Tagline often needs to be hidden on mobile to save space
- •Header should be fixed/sticky or scroll away cleanly
- •Contact information should be tappable (click-to-call phone numbers)
🎉 Completed? Your site is now optimised for the majority of your traffic. You're ready for the next step: Improve Your Website Speed, which builds on this mobile foundation by ensuring fast loading times across all devices.
Troubleshooting
What's Next
You've fixed the critical mobile display issues that were driving visitors away. Your site now provides a solid, usable experience on smartphones and tablets.
Your next priority: Improve Your Website Speed
Mobile users are particularly sensitive to slow loading times—especially on cellular connections. Now that your site displays correctly, you need to ensure it loads quickly. The next guide covers image optimisation, caching, and server response improvements that build on the mobile foundation you've just created.
Go Deeper
Want to master mobile optimisation beyond the basics?
- The Ultimate Small Business Website Audit Guide (2024 Action Checklist) – Complete deep-dive checklist covering mobile usability, speed, and desktop performance with advanced diagnostic techniques.
- Anatomy of a High-Converting Homepage – Once your site is readable, learn how to restructure mobile pages for maximum conversion, including mobile-specific layout patterns.
- Mobile Performance Optimisation – Advanced guide covering complex scripts, server delivery optimisation, and performance budgets specifically for mobile users (Stage 6 content).
Other Get Online Guides
Building a complete, professional web presence:
- Plan Your Website Structure in 30 Minutes – Create a logical site architecture before building pages.
- What Should I Put on My Homepage? – Decide which content elements matter most for your business type.
- Create a Simple FAQ Page – Answer common questions and reduce support burden.
- Trust Signals That Make You Look Professional – Add credibility elements that convert sceptical visitors.
- Add Simple Usable Forms to Your Website – Create contact forms that actually get completed.
- 25-Point Website Pre-Launch Checklist – Final verification before making your site public.
Ready for a Complete Site Audit?
Congratulations! You've tackled the most critical mobile issues that drive visitors away.
NetNav can audit your entire site across 9 pillars in 60 seconds—see what other foundational issues, including advanced mobile performance and speed, still need attention before launch. Get your comprehensive baseline score and prioritised fix list.