Why is my website not responsive: 3 causes

A responsive page changes its layout as the width changes, and an unresponsive one keeps the layout it was drawn at. On a phone, that shows in one of two ways. Either the whole page shrinks until the text is unreadable without pinching, or one block is wider than the screen and the page slides sideways under the finger. The owner checks on a laptop and narrows the window, which triggers media queries but never makes a phone lay the page out wide, so the first problem stays hidden.

• Look at the head of the page for a viewport meta tag that sets the device width.
• At phone width, check for any sideways scroll. If the page moves left and right, something is wider than the screen.
• In the Elements panel, with the device toolbar on, find the widest element and read its width.
• In the Styles panel, check whether a media query rule is crossed out by a later, stronger rule.
• Check that images and embeds scale down, with a maximum width rather than a fixed one.

Phones use a wide virtual screen for pages that do not say otherwise, typically a width close to a desktop screen, and then scale that down to fit the glass. The result is a complete desktop layout drawn small. Headings and body text end up hard to read, and a visitor pinches to zoom and pans around to find the button. The fix is one line in the head: a viewport meta tag that tells the phone to use its own width. Without it, the media queries in your stylesheet never see the phone's real width.

A container with a fixed pixel width, a table with set columns, an embedded map or an image with a width attribute can hold the page wider than the phone, even when the viewport tag is correct. The page then scrolls sideways, and the visitor sees the layout cut off at the right edge. Find the cause in the Elements panel with the device toolbar on: select the widest element and read its width. The block to change is the one wider than the screen, usually by setting a maximum width in place of a fixed width, so it shrinks when the screen does.

You may have written a rule for narrow screens that never takes effect. A rule with higher specificity, or a later rule with the same specificity, often copied in from a theme or a component, sets the desktop width again, so the narrow rule loses. In the Styles panel with the device toolbar on, that rule shows crossed out. Fix it by moving the narrow rule after the desktop one, or by making the selector specific enough to win. A crossed-out rule is still in the file, so check the theme and any component library that loads after your own styles.

A wider table, an embedded map or a banner added later can push the page sideways after a change that looked fine on your laptop. Rerun the same phone visitor after each change, and check that the hours and the address still sit inside the screen. For a site behind a password, use the password you give the visitors, and run the same check on each preview deploy before release.