Mobile Seo Size content to Viewport

• In the image above, the mobile page content is not sized to the viewport which leaves content cut off on mobile devices.

What is a viewport?

A viewport declares how big of a window a webpage should be displayed in. To learn more about viewports - go here

In responsive web design we need to configure the viewport to the Google recommended ¹ value of..

Sometimes after the viewport is configured we discover a problem, like content being cut off.

This occurs because a properly configured viewport is going to display content to the width of what ever device the page is being seen on.

So if the someone is using a phone to see your content, and their phone is 300 pixels wide, your webpages will display at 300 pixels wide.

If you are not sure of what your viewport is set to use our mobile SEO tool here (it will tell you).

Common issues

If some of your content is being cut off, or a user needs to scroll horizontally to see your content, that is bad.

This issue occurs when something in your html is sizing something larger than the viewport window (in our example case - 300 pixels).

A common situation is where you may have explicitly declared the width of an image using absolute values.

In this situation, someone has said an image should be 500 pixels and that means the image will be cut off when seen on devices less that 500 pixels wide.

The solution

To fix that you would not declare the image width explicitly, you would rather declare the width as a percentage or another relative measurement.

In the above example we used an image, but the truth is any element of your html can mess up the viewport size.

With responsive design it is always safest to use relative measurements for every thing you do (things like % or em). Following the the guidelines for legible text will also help in not encountering or correcting content not sized to the viewport.

Third party widgets / frames / videos

You may have your content perfectly sized for the viewport but might be embedding something from a third party (like a video from youtube) into your pages.

If you are getting the "size content to viewport" error on some, but not all of your pages, one of the first places to look is third party content.

Finding this issue without tools

It is easy to determine when a mobile page has content not sized to the viewport. If you go to a page on your smartphone and can wiggle the page left to right, it is a good bet something is wrong with the page.

Responsive pages are in general designed to fill the viewport of the device it is being shown on. If you can scroll left and right, something is likely wrong.

Your page content should not rely on a particular viewport width to render well

Google recommends the following: ²

• Avoid setting large absolute CSS widths for page elements since this may cause the element to be too wide for the viewport on a narrower device (e.g. a device with a width of 320 CSS pixels, such as an iPhone). Instead, consider using relative width values.
• Beware of using large absolute positioning values that may cause the element to fall outside the viewport on small screens.
• If necessary, CSS media queries can be used to apply different styling for small and large screens.

To find out if your pages are configuring the viewport tag correctly (or at all) use our Mobile SEO tool.