Home>Support>Too much white space between rows in page builder

Too much white space between rows in page builder

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!

URL: http://www.grandriversoap.com

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 6 years, 9 months ago Dirk van de Mortel

    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 :)

  2. 6 years, 9 months ago Andrew Misplon Hi, I Work Here

    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:

    no-bottom-padding

    3. Then under Appearance > Custom CSS let’s target that class. Insert the following:

    .no-bottom-padding {
    padding-bottom: 0;
    }
    
  3. 6 years, 9 months ago Rachel Bolton

    I think I followed your instructions properly. But, it didn’t create any change.

  4. 6 years, 9 months ago Andrew Misplon Hi, I Work Here

    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;
    }
    
  5. 6 years, 9 months ago Rachel Bolton

    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?

  6. 6 years, 9 months ago Andrew Misplon Hi, I Work 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;
    }
    
  7. 6 years, 9 months ago Andrew Misplon Hi, I Work Here

    Hope that helps.

  8. 6 years, 6 months ago Rachel Bolton

    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?

  9. 6 years, 6 months ago Andrew Misplon Hi, I Work Here

    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?

  10. 6 years, 6 months ago Rachel Bolton

    Thanks Andrew. I’ve just created the user and you should receive the email confirmation shortly.

  11. 6 years, 6 months ago Private Message - WordPress

    This is a private message.

  12. 6 years, 6 months ago Andrew Misplon Hi, I Work Here

    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.

  13. 6 years, 6 months ago Rachel Bolton

    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

  14. 6 years, 6 months ago Andrew Misplon Hi, I Work Here

    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.

  15. 6 years, 6 months ago Rachel Bolton

    Thank you! This was perfect.

  16. 6 years, 6 months ago Andrew Misplon Hi, I Work Here

    For sure, glad we could help :)

  17. 5 years, 10 months ago Ahmed Kassim

    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

  18. 5 years, 10 months ago IMTanuki

    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!

  19. 5 years, 10 months ago Lucas Tolle

    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.

  20. 5 years, 9 months ago Private Message - WordPress

    This is a private message.

  21. 5 years, 9 months ago Private Message - alis veronica sulbaran mora

    This is a private message.

  22. 5 years, 7 months ago Private Message - Kelly Waters

    This is a private message.

  23. 5 years, 7 months ago Private Message - WordPress

    This is a private message.

  24. 5 years, 1 month ago Monkeyye

    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.

  25. 5 years, 16 days ago Thomasj

    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.

  26. 5 years, 16 days ago Thomasj

    Update: I managed to fix this by adding -80px to the bottom margin in the Row styles..

    Thanks for the fix Andrew..

  27. 4 years, 11 months ago Gareth Archer

    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

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More