Mobile
Make the site fit the screen it is on
Your page does not declare that it should scale to the width of the device, so phones show a shrunken desktop page.
Why it matters
Most visits to a local business site now come from a phone. Without this one line, the phone renders your page as if it were 980 pixels wide and then shrinks it, so text is tiny and buttons are hard to hit. This is a one-line fix and it is the single most common cause of a site being unusable on mobile.
How you would notice it
- You have to pinch and zoom to read anything on your phone.
- Text appears small and the page has a horizontal scrollbar.
- Tapping a link regularly opens the wrong one.
What to do
Stage 1
- Open the head section of your page, or the layout file if your site shares one across pages.
- Add the viewport meta tag. It must include width=device-width and initial-scale=1 to count.
A viewport tag without width=device-width does not fix the problem. Copy the line exactly.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>Stage 2
- Load the site on a real phone. Look for any element wider than the screen, which shows up as left and right scrolling.
- If something still overflows, the usual culprits are a fixed-width image or a wide table.
A table wider than a phone is best stacked into one column below the breakpoint rather than shrunk.
<img src="photo.jpg" alt="Our workshop" style="max-width:100%;height:auto;">How to check it worked
Confirm it worked
Open your site on a phone. The text should be readable without pinching, and there should be no left and right scrolling on the page. Re-run the Siege Test and confirm the Responsive viewport check turns green.