[Resolved] Extra space appeared on the right after adding featured image

[Oleksiy]

Hi, guys
Extra space appeared on the right after adding featured image (in Guttenberg) – https://monosnap.com/file/qjCymTiIgCrpsJtzLZQlOJg8baZaLM.
Wasn’t able to detect the reason or fix it via CSS on my own. Could you, please, help with it?

Also I see “Sorry, you are not allowed to access this page” trying to open plugin configuration page. It happens when child theme is being used. With a parent Classic theme it works, but I need to use child theme.

Thanks.

[Leo]

Hi there,

– Any reasons why you are using a container width of 2000px?
https://docs.generatepress.com/article/container-width/

Looking at your current layout, everything should work much better if you set the container width to 1000px and then you can remove this CSS:

.entry-content,
.entry-summary,
#comments {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

– That means something in your child theme is causing the issue. Can you try downloading one from here?
https://docs.generatepress.com/article/using-child-theme/#installing-a-child-theme

[Oleksiy]

Thanks, Leo

Yes, it works right now if container width is 1000px. But there are some reasons to keep it 2000px for future. First – number of items in the primary navigation menu will increase. And it will be better to have them in one line on bigger screens. Second – I plan to use full width images (maybe featured) and maybe full width videos. At least for these cases fixed 1000px won’t work as a responsive layout for bigger screens, like Full HD. That’s why in my case the issue with horizontal scroll requires fixing.

As for an issue with child theme… Found that this code in the functions.php is responsible – https://docs.generatepress.com/article/remove-the-gp-dashboard-for-non-super-admins/. I have only one admin account, but looks like it’s not super enough to get access to the plugin settings page 🙂

[Leo]

First – number of items in the primary navigation menu will increase. And it will be better to have them in one line on bigger screens.

We can use CSS to set a different container width for the navigation when you have more menu items.

Second – I plan to use full width images (maybe featured) and maybe full width videos. At least for these cases fixed 1000px won’t work as a responsive layout for bigger screens, like Full HD. That’s why in my case the issue with horizontal scroll requires fixing.

Gutenberg has full width image blocks without you having to use 2000px container. It just isn’t very good practice.

You can fix the horizontal scroll with this CSS patch:

body {
    overflow-x: hidden;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Oleksiy]

Thanks, Leo. “overflow-x: hidden” works.

[Leo]

No problem 🙂

[Author]

Posts