[Resolved] Layout Content Padding Impacting Latest Post on Homepage

[Mark]

I have adjusted my container width to the maximum 2000px and now I am trying to update the max width of my content layout. The only way I have been able to do this is to change the content layout dropdown to “separate containers” and then adjusting the padding. While this seems to work for the width of blog articles and other page content it messes with the images that show up under the latest post setting on the homepage. The padding starts to really shrink these images. How can I adjust the max width of the content without messing up these images?

[Leo]

Hi there,

Can you try removing this CSS in Additional CSS field in the customizer first?

body {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

That might be something that’s causing some confusion.

Let me know 🙂

[Mark]

Hi Leo – Thanks for your reply. When I remove that from the CSS, and the content layout to separate containers I still have issues with the recent posts. On the home page the background behind these has changed covering up the text and part of the images. What do you think?

[Leo]

Sorry not 100% sure if I understand the issue.

Here is what I’m seeing and everything looks like it’s according to your settings:
https://www.screencast.com/t/o3f5oZlH2aVe

What would you like to happen?

[Mark]

Hi Leo – See attached image. This is what I am seeing. The background is blue instead of white, the images are small, and the text is covered. If I highlight over the text the width of the text is small (one letter wide).

[David]

Hi there,

You can use the Layout Element to control the Content width:

https://docs.generatepress.com/article/layout-element-overview/

This will allow you to set your single posts and/or pages content width to a smaller size.
Then you can adjust your padding so it no longer squishes your archive post content.

[Mark]

Thanks for the advice. I found what I was looking for to adjust the blog container width. I adjusted this in the CSS (from 600 to 800) and it seems to work.

/* Single posts narrow content container */
.one-container .entry-content, .comments-area, footer.entry-meta {
max-width: 800px;
margin-left: auto;
margin-right: auto;

[Author]

Posts