Page content is too wide???

Asked on September 25, 2015 in Troubleshooting.
Answered

Hello,

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?

bacekjon108 Layers User
Reply
  • Possible Answers to Your Question:

  • 1 Answer(s)
    Answered on September 28, 2015. Best answer

    Resolved.

    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.

    Reply