Page content is too wide???
When running Google mobile test on my Layers page, it shows the following warning:
“Page content is too wide for the initial display, so the user must use the scroll bar to scroll left and right. Adjust the size of the initial content display and provide a better user experience. Page content is 463 pixels wide in CSS, the initial display is wide only 375 pixels in CSS.”
I have experimented by deleting widgets one by one and then Google tested each modification. It seems that the problem is caused by 1900px background image in a Content Widget (Center, No Repeat, Strech options).
However, the results are not conclusive, since sometimes deleting the background photo removes Google warning, and sometimes not…
And most important: in Responsinator I do not see anywhere the need for horizontal scrolling, so I have no idea from where Google is getting this particular warning?
Since Layers is supposed to be fully responsive, I really wonder where someone could make a mistake of making page content too wide?
Possible Answers to Your Question:
I looked into HTML code and found that content which I copied from the web and then pasted in Layers, was causing the problem: all the words in plain HTML were connected with
In browser it looked as spaces between words, but in mobile viewport the whole sentence was treated as one long word, which did not fit into the screen.
There was no horizontal scrooling bar; the “long sentence” was simply cut off the mobile screen.
However, Google mobile test detected the problem.