How to fix mobile viewport on Webflow

Steps for Webflow

1. Webflow adds the viewport meta tag automatically to all published sites.
2. In the Webflow Designer, go to Page Settings (the gear icon on any page) → SEO tab → confirm no conflicting meta tags are entered in the Custom Code → Head Code field.
3. For site-wide custom code, go to Project Settings → Custom Code → Head Code and check for any duplicate or conflicting viewport tags.
4. Remove duplicates, publish, and verify with Chrome DevTools mobile emulation.

What is mobile viewport?

The viewport meta tag is a single line of HTML code placed in the `<head>` of every page. It tells mobile browsers (phones, tablets) how wide to display your site and whether to let visitors pinch-to-zoom. Without it, mobile browsers assume your site is a full desktop page — usually 980px wide — and shrink everything down to fit the screen, making text tiny and buttons nearly impossible to tap. Adding `<meta name="viewport" content="width=device-width, initial-scale=1">` tells the browser to match the device's actual screen width and show your content at a normal, readable size.

Google uses mobile-first indexing, meaning it primarily crawls and ranks your site based on its mobile version. A missing or broken viewport tag signals to Google that your site is not mobile-friendly, which directly suppresses your rankings in search results — especially for the majority of shoppers who search on their phones. Beyond rankings, a site that renders incorrectly on mobile produces a poor user experience: visitors can't read product descriptions, miss calls-to-action, and abandon their carts. Google's own PageSpeed and Core Web Vitals scoring also penalises pages that fail basic mobile usability checks, compounding the ranking impact.

See the complete Mobile viewport guide for every platform and the full background.