[Resolved] Content wider than screen

[Ravi Saive]

Hi,

All web pages showing “Content wider than screen” errors while testing AMP pages. Please see the screenshot here – https://ibb.co/1Tw1Ph2

Let me know how to fix it..

[Elvin]

Hi there,

Perhaps some contents are overflowing outside the viewport size.

Applying this CSS normally addresses this issue.

html, body {
    overflow-x: hidden;
}

It’s worth a try. Here’s how to add CSS – https://docs.generatepress.com/article/adding-css/

[Ravi Saive]

Will it affect Site design or SEO? actually, I am getting that error when accessing the pages with AMP. So which AMP plugin is good with the Generatepress theme?

[David]

Hi there,

that code Elvin provided simply stops content from overflowing the width of the viewport.
But as you said the issue is with your AMP pages.
The plugin you’re using is replacing the GP Theme, so GP has no bearing on it.

The problem i see is you’re using the <pre> element for displaying blocks of code. By default the pre ( preformatted ) displays exactly as it is in your editor, which means a long line of text will overflow a smaller width device.

That can be dealt with in a few ways with some CSS:

1. Force the text to wrap:

.amp-wp-article pre {
    white-space: pre-wrap; 
}

2. Make the container scrollable:

.amp-wp-article pre { 
    overflow-x:scroll;
}

But you should raise the issue with the AMP Plugin developer.

[Ravi Saive]

What If I don’t use AMP, will the generatepress theme render properly on all mobile devices?

[David]

Yep – the theme is fully responsive.

[Ravi Saive]

I have added the given CSS code for pre-tag, but still, AMP pages throwing the error “Content wider than screen”. Any solution?

[David]

You will need to check with the AMP developer on how to add that CSS ( or for them to fix), as adding it to the Customizer or theme styles probably isn’t going to load on AMP. Its effectively a different site.

[Ravi Saive]

Got it thanks for the great support.. 🙂

[David]

You’re welcome

[Author]

Posts