Viewport not set - How to fix this error in your site

Viewport not set - How to fix this error in your site

The ‘Viewport not set’ error occurs when a webpage is missing the viewport meta tag. This tag is a small piece of code placed inside the <head> section of your HTML. Its job is to tell mobile browsers how they should scale and display your content depending on the screen size.

If the viewport isn’t set, mobile devices will assume the site is designed for a desktop screen. As a result, the page will appear zoomed out, forcing users to pinch, zoom, and scroll horizontally just to read or interact with your site. This creates a frustrating experience, increases bounce rates, and negatively impacts SEO rankings.

Why is the viewport meta tag important?

  • Mobile-friendliness: With over half of web traffic coming from mobile devices, ensuring content is responsive is crucial. The viewport tag makes the site adapt smoothly to smaller screens.

  • Better user experience: A readable, mobile-optimized layout encourages users to stay longer and engage more.

  • SEO benefits: Google prioritizes mobile-friendly websites in search rankings. Missing a viewport meta tag is flagged as a critical issue in SEO audits.

Fixing the "Viewport Not Set" Error: Step-by-Step Guide

1. Locate the <head> section in your HTML

Every webpage is built with HTML code. The <head> section is at the very top of the file, before the <body> tag.

Example:

<!DOCTYPE html>

<html lang="en">

<head>

  <title>My Website</title>

  <!-- This is where you’ll add the viewport meta tag -->

</head>

<body>

  <h1>Welcome to My Website</h1>

</body>

</html>

👉 Look for <head> ... </head> — that’s the part you’ll be editing.

2. Add the viewport meta tag

Inside the <head> section, paste the following line of code:

<meta name="viewport" content="width=device-width, initial-scale=1">


Added viewport meta tag to the HTML

What it does:

  • width=device-width: tells the browser to use the device’s screen width.

  • initial-scale=1: sets the initial zoom level to 100% (so text and layout look correct).

3. Save your changes and upload the file

  • If you’re working with a content management system (like Shopify, WordPress, etc.), you’ll usually find the <head> inside the theme editor or template files.

  • Save your changes and publish them.

4. Test if it worked

Run your site through these tools:

  • Google Search Console - Mobile-Friendly Test: Checks how your site looks on mobile.

  • PageSpeed Insights: Reports if the viewport tag is missing.

  • You can also just open your site on your phone — the text and layout should now scale properly.

5. Troubleshoot if the error remains

Sometimes adding the viewport tag doesn’t fully solve the problem. Here are a few things to check:

  • Conflicting CSS: If your site uses fixed widths in CSS (like width: 1000px;), content may still overflow on small screens. Consider switching to relative units (%, em, rem).

  • Multiple viewport tags: Having more than one meta viewport tag can confuse the browser. Make sure there’s only one.

  • Caching issues: If you don’t see changes right away, clear your browser cache or check in an incognito window.

Do you need coding skills for this?

Yes, adding or editing HTML requires some coding knowledge. If you’re not comfortable making these changes yourself, Tapita’s expert team can help. They’ll not only add the viewport meta tag but also check deeper for related issues, such as improper scaling, conflicting CSS rules, or other mobile usability errors.


    • Related Articles

    • How to fix SEO error: Too long URLs

      What it means The "Too long URLs" error means your pages' URL is longer than 115 characters. The URL is the full address of a page, for example: https://www.your-domain.com/products/sample-product Why you should fix it URLs shorter than 115 ...

    • Dofollow external links guide: Why does it matter and how to fix

      Dofollow external links are standard HTML links to other websites that, by default, pass authority or "link juice" to the linked site, signaling to search engines that they should follow the link and consider the linked page a trustworthy and ...

    • How to Set up a Google Search Console Account for your Shopify stores

      Google Search Console is one of the most important tools in your digital marketing toolkit. It helps you maximize your visibility in Google search results by showing you what’s working and what’s broken on your site. (Shopify, 2024). This article ...

    • Why does my site have broken links?

      Broken links are hyperlinks that no longer work, leading to an error page or a non-existent web page (404). They are typically a result of: Content removal or relocation: When a webpage is deleted or moved to a different URL without a corresponding ...

    • SEO Audit Guideline in Tapita SEO & Speed

      SEO Audit Guideline in Tapita SEO & Speed Tapita SEO Audit allows Shopify merchants to run an SEO audit to determine your site's technical and on-page SEO problems. Find out what is preventing your website from ranking higher. First, you should ...