[Resolved] Content width is much smaller than container width on pages

[Jason]

Hello,

I am configuring a new blog at houseplanthandbook.com. On all posts and pages, there is a white background showing the width of the container. However, the content on each post/page is much skinnier, like there is a margin around all site content. Can this be removed?

Also, speaking of the white background behind the container on all posts/pages, how can I remove this or get it to be the same color as outside the container?

Thanks in advance!

Jason

[Ying]

Hi Jason,

It’s this CSS that you can find at customizer > additional CSS:

.no-sidebar:not(.archive):not(.blog) .inside-article > *, 
.no-sidebar:not(.archive):not(.blog) #comments,
.no-sidebar:not(.archive):not(.blog) .paging-navigation {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

If you remove this, the content will be the same width as the container.

[Jason]

Thanks, Ying! That did work for extending the width of each page.

As for the question of changing the background color from white to match the rest of the background, do you have any recommendations for this? This would be on both pages and posts.

Jason

[Ying]

The color can be changed at customzier > colors > content > background 🙂

[Jason]

Of course, very simple.

I’ll make this as resolved, and thanks again!

Jason

[Ying]

You are welcome 🙂

[Jason]

Hi Ying,

Actually, one more thing. I’d like pages to be the width of the container, as worked with your initial suggestion.

However, I would still like post content to have that margin. Removing the CSS removes the margin for both posts and pages. Can the post margin be kept?

Thanks again!

Jason

[Jason]

As well as post background, rather than a global background.

[Ying]

Try using a layout element to set 700px as the width for single posts:
https://docs.generatepress.com/article/layout-element-overview/

[Author]

Posts