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.
What You'll Have When Done:
A mobile website version that passes basic usability checks and is fully readable on smartphones.
Time Needed: 45 minutes
Difficulty: Beginner
Prerequisites:
Quick Navigation:
---
Before You Start, Check You Have:
Not sure you've covered the prerequisite website audit? NetNav's Audit checks for basic mobile responsiveness and key speed factors in 60 seconds, giving you a baseline score to work from before you start editing.
This builds on having completed a cross-device test where you documented exactly what's broken. Now you'll fix it.
1. Activate Mobile View in Your Editor
Depending on your chosen website platform, the location varies:
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.
You've Fixed the Basics If:
✅ 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.
---
This section addresses the three core mobile display problems in detail, with platform-specific instructions and solutions for common complications.
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:
Common culprits:
[MEDIA:SCREENSHOT:mobile-view-overflow]
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:
```css
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:
```html
```
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):
Squarespace:
Wix:
Custom CSS (any platform):
```css
@media (max-width: 768px) {
body {
font-size: 16px;
}
h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
}
```
[MEDIA:SCREENSHOT:mobile-font-size-comparison]
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:
Most modern themes handle this automatically, but if text feels cramped, add this CSS:
```css
@media (max-width: 768px) {
p {
line-height: 1.6;
margin-bottom: 1em;
}
}
```
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:
Platform adjustments:
WordPress (Block Editor):
Squarespace:
Wix:
Custom CSS:
```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.
[MEDIA:SCREENSHOT:mobile-clickable-targets]
Clickable Target Spacing (The 48x48px Area Rule)
Step 8: Test Across Multiple Devices
Don't rely on a single device or simulator. Test on:
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
This test checks:
Step 10: Check Mobile Navigation Functionality
Your mobile menu is critical. Test thoroughly:
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:
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:
Your Mobile Site Is Optimised If:
🎉 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.
---
Common Mobile Display Problems and Fixes:
Problem: Images are stacking strangely or shrinking too much on mobile.
Fix: Check that images are set to 100% width with auto height, not fixed pixel dimensions. In some builders (particularly Wix), you may need to adjust the mobile layout separately from desktop, as they maintain independent layouts.
Problem: Font size changes don't apply globally—headers still appear too small.
Fix: Check your global mobile typography settings first (theme customiser or site styles). Many platforms require you to set mobile font sizes separately from desktop. Only override individual elements if the global setting doesn't work.
Problem: The mobile menu button (hamburger icon) doesn't appear or doesn't open when tapped.
Fix: Check your theme's mobile header settings. Many themes require you to explicitly enable the mobile menu—it's not automatically activated when you create desktop navigation. Look for "Mobile Header," "Responsive Menu," or "Hamburger Menu" settings in your theme options.
Problem: Content looks fine in the editor's mobile preview but broken on an actual phone.
Fix: Editor previews are approximations. Always test on physical devices. The issue might be browser-specific (particularly Safari on iOS) or related to actual touch interaction rather than mouse clicks.
Problem: Fixed-width containers cause overflow despite setting images to 100%.
Fix: The parent container likely has a fixed pixel width. Find the container element and change its width to 100% or max-width: 100%. Check for added padding that pushes the total width beyond the viewport.
---
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.
Want to master mobile optimisation beyond the basics?
---
Building a complete, professional web presence:
---
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.
Previous in sequence
Next in sequence
Other Start Here Guides:
Not sure where to start? Get a free audit of your current online presence and discover your biggest opportunities.
Run Your Free NetNav Audit Now →