A page that looks like a tiny desktop layout on a phone may have a missing or unsuitable viewport declaration. Check that declaration before changing font sizes throughout the stylesheet. Then test the layout and zoom separately: a viewport tag helps establish the layout width, but it does not make every component responsive.
Inspect the existing viewport declaration
Open the published page source and look in its <head> for name="viewport". Save the current value before editing. A common starting point is:
<meta name="viewport" content="width=device-width, initial-scale=1">MDN’s viewport reference explains these hints. width=device-width uses the device width in CSS pixels; initial-scale=1 sets the initial scale. CSS pixels are not necessarily the same as the physical pixels in a screen or image file.
If a CMS or theme already emits the intended declaration, keep that existing source of output. Adding another tag creates an extra setting to reconcile. Inspect the affected page template as well as the home page; one correct page does not establish what other templates produce.
Draft the line with the Meta Tag Generator
- Open the Meta Tag Generator.
- For a small test, enter Seed Tray Care in Page title. The generator needs a title or description before it produces a block.
- Choose width=device-width, initial-scale=1 under Viewport.
- Select Generate Meta Tags and find the viewport line shown above.
- If you use Copy code, extract that line from the copied block for this task.
The block also contains other metadata. Do not replace existing titles, robots instructions or canonical links merely to update the viewport. In a managed site, change the relevant template or existing setting through its normal workflow and inspect the resulting HTML. Our canonical URL guide explains why that separate tag needs its own review.
This generator drafts text. It does not open your website, install the tag or test a phone layout.
Avoid zoom restrictions as a layout repair
Watch for an old declaration containing user-scalable=no or a restrictive maximum-scale. These are zoom controls, not fixes for overflowing cards. The W3C viewport zoom test rule checks for user-scalable=no and maximum-scale values below 2. Passing this one check does not establish full accessibility.
For the ordinary page in this walkthrough, the starting line leaves those restrictions out. Some browsers ignore zoom limits or offer an accessibility override, so behavior can vary. Keep the markup permissive and test the actual browser instead of relying on an override to make restrictive markup usable.
Fix remaining overflow in the layout
Suppose a panel has width: 960px inside a parent that fits a narrow phone screen. The viewport tag does not shrink that fixed-width panel. A simple component rule could instead be:
.guide-panel {
box-sizing: border-box;
width: 100%;
max-width: 960px;
}Here, the panel follows its parent’s width up to its own cap. This assumes the parent itself fits; other fixed widths, long unbroken content or grid sizing can still cause overflow. MDN’s responsive design guide covers flexible layouts and the viewport’s role.
Check images separately too. Their file dimensions do not by themselves set the desired CSS display size; see the image pixel and layout sizing example.
Verify the saved page on a phone
Check markup, layout and zoom as separate outcomes
After saving, reload the live page and confirm its head contains the intended viewport value. Open it in a narrow browser view to find clipping, horizontal overflow and overlapping controls. Follow the actual menu and form flow rather than checking only the first screen.
Then use a real phone to try zooming and reading the enlarged text. Check whether controls remain reachable and content remains understandable. Browser emulation helps investigate layout, but it does not replace the device’s zoom behavior. Keep a note of the tested page, browser and result so a later template change can be checked against it.
The viewport declaration is one part of making a page usable. It is not an SEO ranking guarantee or a substitute for reviewing the rest of the design.