Originally seen at: https://varvy.com/mobile/content-size-viewport.html
Varvy is now Down and this Content is for Archive Purposes.

Size content to viewport


Cut off images and content are not good for mobile users

  • The image above shows one mobile page that is correctly showing content and one where the content is not sized to the viewport.
  • When images and text go offscreen, it requires a user to scroll sideways to see content.

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 1 value of..

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

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 how your viewport is set, use our mobile seo tool (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.

cut off image

<img src=example.png style=width:500px; >

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

The solution

To fix that you would not declare the image width explicitly (with an exact number of pixels), you would rather declare the width as a percentage or another relative measurement.

properly sized content

<img src=example.png style=max-width:100%; >

In the above example we used an image, but the truth is any element of your html can find itself in this situation.

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: 2

  • 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
  • Beware of using large
    absolute positioning values that may cause the element to fall outside the
    viewport on small screens.
  • If necessary,
    media queries
    can be used to apply different styling for small and
    large screens.

Google also states: 3

“On both desktop and mobile devices, users are used to scrolling websites vertically but not horizontally, and forcing the user to scroll horizontally or to zoom out in order to see the whole page results in a poor user experience.”

Tools to use to find out if your pages are configuring the viewport tag correctly (or at all):

Leave a Comment