Our issue was Google continually reporting: Content wider than screen.
Yes, the image was 700 pixels wide but the offending image was correctly configured in CSS to be mobile friendly:
img {
max-width: 100%;
display: block;
}
But Google was having none of it.
Then we noticed something.. the offending image had no borders and a considerable amount of white space. So.. (genius), we simply created a new image (700 pixels wide), but with a light gray, one pixel border around it. and guess what.. Google reported it the following day as FIXED! Thanks Gman!
Without Border (621px x 339px)
With Border (700px x 342px)
Content wider than screen
Horizontal scrolling is necessary to see words and images on the page. This happens when pages use absolute values in CSS declarations, or use images designed to look best at a specific browser width (such as 980px).
To fix: Make sure that the page uses relative width and position values for CSS elements, and make sure images can scale as well. Read more in Size Content to Viewport.
Questions
why does google continue to report an image as content wide than screen when it isn’t
Mobile Usability issues detected
Content wider than screen