A page that looks clean on a laptop can fall apart on a phone: text runs off the edge, menus crowd the header, images force sideways scrolling, or Google sees a weaker mobile version. The fix starts with a responsive site that keeps one URL, serves the same HTML, and lets CSS adapt the layout to each screen. Start with the broad layout, then tighten images, navigation, testing, and platform-specific mobile settings.
Start with responsive design
Use one URL for each page, and serve the same HTML to desktop, tablet, mobile, and non-visual browsers. Google recommends responsive web design as the easiest mobile site pattern to implement and maintain.
Make the design adapt with CSS instead of sending phone visitors to a stripped-down page. The layout changes by screen size while the primary content stays equivalent.
Keep page titles, headings, primary content, image captions, file names, alt text, robots meta tags, and structured data aligned between mobile and desktop views. This protects the page for Google mobile-first indexing.
If your site builder offers a responsive theme or mobile-friendly template, choose it before writing custom code. It fixes the base layout first, which makes individual page edits easier.
Tip: fix the site structure first, then polish individual pages.
Add the viewport tag and stop sideways scrolling
For custom HTML sites, make this code check before you chase spacing problems.
- 1.Open each page template and find the page head area.
- 2.Add <meta name="viewport" content="width=device-width, initial-scale=1">.
- 3.Remove viewport values such as minimum-scale, maximum-scale, and user-scalable, because each one restricts zooming: maximum-scale caps how far a visitor can zoom in, user-scalable set to no turns zooming off, and minimum-scale limits how far they can zoom out. The browser defaults are the better choice for accessibility.
- 4.Look for fixed-width elements that are wider than a phone screen.
- 5.Replace rigid pixel widths with responsive sizing such as percentages, flexbox, grid, max-width, or other viewport-aware CSS.
Fix images that break the page width
The most common cause is an image or embedded media block keeping its desktop width on a small screen.
Add or confirm this fluid image rule in your stylesheet: img { max-width: 100%; display: block; }.
Add width and height attributes to image elements.
Reload the page at a narrow width and check it from top to bottom. One oversized image can make the whole page scroll sideways.
Use breakpoints when the content needs them
This fixes layouts that respond to the screen but still feel cramped, awkward, or hard to read on phones.
Start with a small-screen layout.
Widen the viewport until the content needs a layout change.
Add a CSS media query at that content-driven width, such as @media (max-width: 600px) { ... } for small screens.
Place the small-screen and large-screen layout rules inside the matching media query blocks.
Choose breakpoints where the content stops working well, not where a device name sounds familiar.
Make Wix, Squarespace, WordPress, Shopify, or Webflow mobile friendly
Most consumer sites live inside a builder, so use the builder’s mobile tools before editing code.
In Wix Editor, open Settings, choose Mobile Friendly, turn the toggle on, and close the pop-up. Then click the Mobile icon to open the Mobile Editor.
In the Wix Mobile Editor, hide an element with Hide Element, restore one from Hidden Elements with Show Element, resize text with Scale Up or Scale Down, customize the mobile menu, reorder sections with Zoom Out & Reorder, and add mobile tools from Mobile Tools.
In Squarespace 7.1, click the Mobile View icon while editing, then click Edit to adjust text, blocks, sections, and section styles.
For Squarespace Fluid Engine sections, open the page from Pages, click Edit, switch to Mobile View, then arrange and resize blocks. Keep pages lighter by reducing large media and excess page content, especially below about 5 MB where possible.
In WordPress.com, open Appearance and Themes, then activate a mobile-friendly theme. In the editor, use View to preview Desktop, Tablet, or Mobile.
In WordPress.com, open Appearance, choose Editor, select the template or page, and use controls such as Stack on mobile, Allow to wrap to multiple lines, mobile menu display settings, responsive styles, and relative font units such as em or rem.
In Shopify, open Online Store, click Edit theme, and use the mobile preview button. Edit sections and blocks or theme settings from the sidebar, then click Save.
In Webflow Designer, use the canvas bar to switch between Desktop, Tablet, Mobile landscape, and Mobile portrait. Adjust styles at the selected breakpoint, hide elements by setting display to none, tune the Navbar menu button in Navbar Settings, and review responsive images on mobile breakpoints.
If the builder tools do not fix the page, switch to a better responsive theme or template before adding custom CSS.
Check menus, text, and hidden content
This applies when the page fits on mobile, but the navigation, buttons, or copy still feel hard to use. Start with the header because a broken mobile menu makes the rest of the page hard to reach.
Open your site’s mobile preview and inspect the header. The mobile menu should collapse cleanly, show the right links, and stay inside the viewport.
Check text blocks and buttons next. In WordPress.com, use Allow to wrap to multiple lines on supported blocks, including Buttons, Sharing Buttons, Navigation, Social Icons, Comments, and Row or Stack.
In Squarespace, keep Letter spacing at 0px or higher to prevent mobile font overlap.
In Wix, open the Mobile Editor, select the text, then use Scale Up or Scale Down.
Review anything hidden on mobile. Hide duplicate or decorative blocks only when the mobile page still keeps the same primary content users and Google expect.
If this method fails, return to the main layout: remove fixed-width elements, use a responsive theme, and test the same page again at phone width.
Preview on phones before you publish
This fixes surprises that editor previews miss, especially menus, landscape rotation, and touch-size layout problems.
In Chrome on desktop, open DevTools.
Click Toggle device toolbar.
Open Dimensions and choose Responsive, or select a specific device.
Drag the handles or enter width and height values to test narrow and wide screens.
Open More options and choose Show media queries.
Click Rotate to test the same page in landscape.
Run mobile performance and Google checks
Use these tests after the page looks right, because a mobile-friendly page also needs to load and render properly.
- 1.In Chrome DevTools, open Lighthouse, click Analyze page load, then click Run audit.
- 2.For a public page, go to https://pagespeed.web.dev/, enter the page URL, and click Analyze.
- 3.Review the mobile results and Lighthouse recommendations for performance, accessibility, and SEO issues.
- 4.For a verified site, open Search Console, use URL Inspection, enter the URL, and run Test live URL.
- 5.Use the rendered result and indexing information while fixing mobile issues.
Skip retired mobile friendly tools
Older instructions still point to Google’s Mobile-Friendly Test or the Search Console Mobile Usability report. Google retired the Mobile-Friendly Test, Mobile Usability report, and Mobile-Friendly Test API on December 1, 2023.
Use Chrome DevTools, Lighthouse, PageSpeed Insights, and Search Console URL Inspection instead. Those tools cover previewing, measuring, and checking Google-rendered output.
If those checks still show problems, go back to the layout itself: use responsive design, keep mobile and desktop content equivalent, remove fixed-width elements, make images fluid, and test again at real phone widths.
Frequently Asked Questions
Do I need a separate mobile version of my website?
No for most sites. Google recommends responsive web design because one URL serves the same HTML and CSS adapts the layout for each screen size.
Can phone settings make an existing website mobile friendly?
No. Browser, phone, and operating system settings only help you preview or test a page. The fix has to happen in the site theme, builder, CSS, markup, or server setup.
When should I use dynamic serving or separate mobile URLs?
Use them only when your site architecture requires device-specific HTML. Dynamic serving needs the Vary: user-agent HTTP header, and separate mobile URLs need matched desktop and mobile pages.
How do I test a mobile page on a real Android phone?
Enable USB debugging in Android Developer Options, open chrome://inspect#devices in desktop Chrome, enable Discover USB devices, connect the phone by USB, accept the phone prompt, then click Inspect next to the tab.
