Hi, I’m trying to use Beaver Builder (+Beaver Builder theme) on posts. As soon as I hit “Page Builder”, an extra margin is introduced in the post. If I switch back to “Text Editor”, the margin disappears again. This doesn’t happen with pages.
The global settings for margins on rows and modules are set to default. Changing them could fix the problem with posts, but would also remove the correct layout of pages. Fixing margins on every post is a hassle.
Is there a structural fix for this problem? It could well be a bug in Beaver Builder.
It looks like the page builder page row is fixed width as opposed to full width. By default, when you drop a row in a page or post, it will set it as fixed width, so you’ll want to toggle that to full width which should remove that extra padding. Let me know how that goes for you!
Hi Billy, unfortunately, it doesn’t change anything. I’ve set Width:Full width->no change. A new option appears: Content width, but even setting that to full width doesn’t change anything.
The rows on the homepage are also set to fixed and they don’t show the problem?
Hey Tom. I see what you mean here. We add 20px margin and padding to rows by default, and that spacing is what’s causing the inconsistencies. Unfortunately, there is no way to have a different defaults for posts and pages.
Are you hoping to use Beaver Builder for all of your blog’s posts, or just a few? If it’s only a few, I would recommend just manually removing the row margins and paddings to keep things consistent.
If you’re going to be using BB for many posts, you’ll probably want to experiment with writing some CSS to override the default margins and paddings on BB posts. I am not sure if this is something we would be able to help with within the scope of our support, though. Are you comfortable editing CSS? I can try to point you in the right directions.
I don’t understand why the problem doesn’t surface on pages. They share the settings, but the page layout doesn’t shift when I activate Page Builder.
If some CSS will cancel out these differences, that would be the best option, because I plan to use Beaver Builder on quite some projects and I’m afraid I will run into this repeatedly. Some pointers would be great. Thanks!
Tom, I don’t think there is really a problem per say.
Any content produced by Beaver Builder will use the default spacing (margins & padding). As far as I can understand, the posts/pages that you’re creating with the WordPress editor don’t have the extra spacing that Beaver Builder pages do. Is that correct?
For future projects, if you want posts and pages to have consistent spacing, I would recommend zeroing out the default margin/paddings before building your pages.
After looking at it and thinking about it a bit more, you’re going to have to manually adjust your margins/paddings on a page-by-page or post-by-post basis. You can either remove the margins/padding from your posts, or you can zero out the global defaults and individually add margins/padding to your Beaver Builder pages. Sorry I don’t have a better answer for you.
Edit: I take back my original comment. Sorry for the run around here, to be honest I am trying to wrap my head around what’s going on here too.
There is a difference in how the post and page markup is generated and laid out. Quickly, the reason we’re doing things differently on pages is because it gives the ability to create edge to edge designs. The parent content container on pages is full width by default, whereas the parent content container on posts is not. You’re right that the two are different. We’re going think about how we can fix this in a future update. Thanks again for brining this to our attention.
You’ll probably need to experiment with this a bit, but you should be able to target and fix the pages that you are having trouble on with CSS. Give this a try:
Hi Tom. I see what you mean now. Just to clarify, after playing with this a bit more I believe this quirk stems from the page layout (either sidebar or default), not posts and pages. If you create two pages, one with a sidebar and one without, you’ll notice the same thing. We’re going to take a closer look at this to see if there is something we can do here. Thanks for bringing this to our attention! We’ll follow up ASAP when we have a better answer.
Absolutely. Let me know if that CSS works as a temporary solution. In all honesty, this will be a pretty major, structural change to fix this, so it might take us some time.
Hi Robby, I’ve tried the CSS and it appears to solve the problem. I haven’t tried all circumstances (mobile) yet, but if I run into trouble, I’ll let you know. Thanks for your help.