[Resolved] Content wider than screen

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/

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.

Yep – the theme is fully responsive.

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.

You’re welcome