[Resolved] Problem Formatting Full Width Blog Posts

[Derek]

Hello,

So I want to make my blog pages look similar in format to my full width blog front page. The blogs front page is /blog, and you can see how the blog posts look by taking a second look at /test-post. I’m using beaver builder for my blogs front page, and you can see how it looks clean and white. If you look at the post pages themselves however, the margins are all messed up and everything is in white blocks in front of a grey background.

How can I make my posts similar in format to my blog front page?

Thank you!

[David]

Hi, the BB rows on your blog pages are set to full width. Whereas those elements on your home page are contained. This would be the first place to begin fixing the issue.

The background color is set in the Customiser > Colors > Body

[Derek]

Hi David.

The background color change worked thank you. About the margins…the thing is that the BB rows and home page are indeed both set to full width, I double & triple checked. You can even seen on my /test-post page that the comment box seems to be formatted correctly with the left margin, but the blog’s text is bugged somehow there is no margin. I’ve deactivated wp-rocket in case that was preventing you from seeing the most up to date info.

[Tom]

Is the Full Width option checked in the Page Builder Container metabox for that post?

If not, do you have any custom functions added?

[Derek]

Hi Tom,

Yes. The “Full Width” option is checked under “Page Builder Container” for the /test-post post, but that is as planned. I want the blog posts to be full width just like the /blog main page. I have the main blog page “Full Width” option checked as well and it’s not causing any margin problems. However, the post pages themselves are not formatted the same despite having the exact same settings.

The only functions that I’m running are in relation to the header and logo.

Perhaps what I need to do is either set custom css for posts margins only when full width (if that’s possible), or change the posts back to the default container, then add custom css for the margins? Honestly I don’t know 😛 I thought it was just a bug, but I think it has to do with the fact that the blog page is using Beaver Builder and it has default 20px margins, while the blog posts themselves can’t be used with beaver builder thus there are no margins. Unless there’s a plugin for that. Sorry I always complicate things lol.

Whats funny is the comment box margins are formatted correctly, but the post text isn’t..weird right?!

Suggestions?

Thanks!

[Tom]

Ah, got it! Beaver Builder is adding padding to the blog.

Try adding this:

.full-width-content.separate-containers.single .inside-article {
    padding: 40px;
}

[Derek]

Worked! Thank you!

[Tom]

You’re welcome! 🙂

[Author]

Posts