There is a big gap of white space between the rows on my homepage, built with Page Builder, at www.grandriversoap.com.
I’ve gone to Settings>Page Builder and set the Row Bottom Margin from 30 all the way down to 0. That didn’t change anything. I’ve also gone into ‘edit row’ in Page Builder and under ‘Theme’ selected No Bottom Margin for both of the rows in the page.
Any suggestions on how to shorten the white space?
Thank you!
Hiya,
I took on your page. With the console (Chrome or Firefox) you can inspect the html elements. I found:
media="all" .layout-full .panel-row-style { margin: 0 -1000px; padding: 25px 1000px 25px 1000px;When you change the number 25 in 5 or something, in styles.css it will tighten the spacing between the rows. Test if that remains so, over the pages. There might be another class in styles.css that sets this space…. Inspect and you will find :)
Hi rachelamanda
Thanks for reaching out. We’re in a bit of a flux phase where we have new Page Builder options under Edit Row > Layout and Edit Row > Theme. This is currently some cross over (legacy issues) which we’ll resolve in the next update. Bottom Margin is working, I can see that in your source, the row bottom margin is set to zero. There is however, as Dirk mentioned, still row padding. Ideally you should be able to go to the Layout tab and set Padding to zero, that’s currently not working in Vantage, so here is what you can do:
1. Edit the row, click Attributes tab on the right.
2. Enter a row class name in, something like:
3. Then under Appearance > Custom CSS let’s target that class. Insert the following:
.no-bottom-padding { padding-bottom: 0; }I think I followed your instructions properly. But, it didn’t create any change.
Ahh right. Ok nearly there, let’s change Appearance > Custom CSS to be more specific:
.layout-full .panel-row-style.no-bottom-padding { padding-bottom: 0; }Thanks Andrew. That definitely tightened up the space between the rows within the content. So, we’re almost there now.
It didn’t affect the big space between the page title (Natural and Organic Soaps and Skincare) and the sub-title (Handmade with Love in Brantford, ON) (which is the first row in the Page Builder layout, using a Visual Editor widget).
Is there something else that needs to be applied specifically here?
Try swapping out this one selector in your Custom CSS and edit as required:
layout-full .panel-row-style.no-bottom-padding { margin-top: -15px; padding-top: 0; padding-bottom: 0; }Hope that helps.
So, I really dropped the ball on resolving this issue. But have come back to it today. I’ve updated the CSS as suggested and tried making all of the different numbers smaller. It doesn’t make any changes to the whitespace between the rows. Any other suggestions?
Hi Rachelamanda
Would it be possible for you to create a temporary admin account for us so we can log in and take a look?
Thanks Andrew. I’ve just created the user and you should receive the email confirmation shortly.
This is a private message.
Thanks. Take a look now. I’ve added a style to the bottom of your Custom CSS and added that same row style to the second row of your home page under Attributes.
Take a look and let me know if you need us to explain any further.
Hi Andrew,
Maybe it is the way the site is displaying on my computer? I still don’t see any difference :-(
I’ve posted a screenshot at http://www.grandriversoap.com/wp-content/uploads/2015/06/white-gaps.png and added arrows to indicate the spaces that I’d like to be able to shrink. Is this the way they display for you too?
Thanks,
Rachel
No problem. Please check your home page and Custom CSS now. I’ve removed heading padding and added our no-padding class to both rows. You can now make adjustments from this point.
Thank you! This was perfect.
For sure, glad we could help :)
Hi
Please help me get rid of this white space between my menu header and page builder row.
I have read similar threads and i have tried the following code in Custom CSS which only reduces the space by I think about half
#main {
padding-top: 0;
}
#main {
padding: 0px;
}
both these codes only reduce the white space by half.
any suggestions?
thnx
HI
I am having a similar issue.
WP Version: 4.4.1
Theme: Elegant Theme / The Professional
Web Site: http://www.easternwind.asia
I am in the process of cutting over to Artbees Jupiter, but in the meantime…
PROBLEM
I have both of the following scenarios:
1) Multiple rows, each with one Site Origin Editor widget.
2) 1 row, with multiple Site Origin Editor widgets.
In BOTH cases:
a) Too much space between widgets.
b) A bottom border under each widget.
TROUBLESHOOTING
I have tried all of your recommendations above, but nothing seems to make a difference…
Thanks in advance for any help you can provide!
Hello, Ahmed Kassime and IMTanuki
The problem seems to be the same, it is different than the first user informed.
In addition, this topic has already been closed. Please open a new topic, including the website link or page where there is the problem that we will be happy to help them.
This is a private message.
This is a private message.
This is a private message.
This is a private message.
The only way so solve this is that never put more than one widge in the same line.
Then you can set every padding and margin.
The space between two lines can be set as 0;
Hope this can help.
Hello all,
I have a similar problem just at the bottom of the row, I followed the instructions Andrew supplied and managed to rid the top padding but it did not fix the white space at the bottom, I tried adding similar code to other attributes around my site with no success. I really appreciate any help in advanced..
Thank you.
Thomas.
Update: I managed to fix this by adding -80px to the bottom margin in the Row styles..
Thanks for the fix Andrew..
Just as a note to anyone struggling with this still. I went Settings > Page Builder > Layout > Row Bottom Margin > -50px > Save
Thanks for creating such an awesome plugin