[Resolved] mobile viewport smaller than content

[Markus]

Hi Tom!

On some devices/browsers I see a hozizontal scroll bar if viewport is smaller than container width.

I do not use the mobile header!

Google PageSpeed Tools says:

Size content to viewport
The page content is too wide for the viewport, forcing the user to scroll horizontally. Size the page content to the viewport to provide a better user experience.
The page content is 422 CSS pixels wide, but the viewport is only 411 CSS pixels wide.
Hide details

One problem I found was the screen-reader-text for the search icon was hanging out on the right side. I added this CSS

.search-item .screen-reader-text {
    right: 0;
}

Helped on on topic, but the page content is still too wide.

Any idea?

I you want to check, see https://insoguide.de

Thank you.

[Tom]

This is a bug I’ve fixed in the upcoming version.

You can grab the latest files here: https://github.com/tomusborne/GeneratePress

Aiming to release this new version on Sunday 🙂

[Markus]

I’ll wait.
Have a nice weekend.

[Tom]

You too 🙂

[Author]

Posts