Your page content should not rely on a particular viewport width to render well. We explain why you need to size your content to the viewport and how to do it.
When content goes off screen, a mobile user has to scroll sideways in order to view content. This isn’t exactly great for user experience, so to avoid this site owners should ensure they size text and images to the viewport.
What is a viewport?
A viewport determines how big of a window a page should be displayed in. For a more in-depth explanation on viewports, take a look at our page on viewports.
In responsive web design the viewport is configured to Google’s recommended value of:
<meta name=viewport content=”width=device-width, initial-scale=1″>
However, sometimes after the viewport is configured we can find problems, such as content being cut off. This happens because a correctly configured viewport will display content to the width of whatever device the page is being viewed on.
Common problem
A user should not have to scroll horizontally to view your content. This can happen when your html is sizing something as bigger than the viewport window. Generally, this happens when you’ve specifically determined the width of an image using absolute values.
This would look something like this:
<img src=example.png style=width:500px; >
In the above example, an image has been sized to 500 pixels. This would mean that the image would be cut off when viewed on devices less than 500 pixels wide.
This issue is easily resolved, with a site owner instead declaring width as a percentage or relative measurement instead of a specific image width with an exact number of pixels. To do this, you would enter this:
<img src=example.png style=max-width:100%; >
This example uses an image, however any part of your html can be used in this way.
In responsive design it’s always best to use relative measurements for everything, such as a percentage or em. Abiding by the guidelines for legible text will also help avoid having to correct content not properly sized to the viewport.
Third party content widgets
Third party content could be a widget, frame or video. Whilst you may have your content perfectly sized for the viewport, you need to bear in mind issues that may arise from embedding third party content on your pages.
Typically, if you’re finding a ‘size content to viewport’ error, you should first check your third party content.
How to check that content is sized to the viewport
To determine whether a mobile page’s content is sized to the viewport, simply open the page on your phone. If you can scroll the page left to right, this usually means there’s an issue. This is because responsive pages are generally designed to fill the viewport of the device it is being viewed on.
Google recommendations
Google has stated that “forcing the user to scroll horizontally or to zoom out in order to see the whole page results in a poor user experience.”
Therefore, to prevent this you should:
- Avoid setting large absolute CSS widths for page elements as this may make content too big for the viewports of narrower devices
- Don’t use large absolute positioning values that may mean elements fall outside the viewport of small screens
- Where necessary, apply CSS media queries for different sized screens