Home>Support>Spacing rows, columns, page border, title

Spacing rows, columns, page border, title

By baumaeschi, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hi
Could somebody please tell me how I can further reduce the spacings on the following (test) page:

http://web251.login-143.hoststar.ch/wp1/proj-8/

1. Spacing to the left/right borders of the page
2. Spacing between columns/pictures
3. Spacing between rows/pictures
4. Spacing to the title of the page (Project 8)

In the page builder Edit Row Layout Bottom Margin, Gutter, Padding are set to 0 px. Row Layout is either “Standard” or “Full Width” (can’t see any difference!).

In the SiteOrigin Image Layout Padding is set to 0 px.

I’m using the Theme GenreratePress.

Many thanks
Martin

URL: http://web251.login-143.hoststar.ch/wp1/proj-8/

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

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

    Hi Martin

    Thanks for reaching out. Page Builder is implementing the settings you showed us via email. Those are being outputted. Your theme is adding the following:

    .separate-containers .inside-article,
.separate-containers .widget,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation {
	padding: 40px;
}

    This means that each widget will receive 40px padding all around. To reverse this padding you could add the following to a Custom CSS plugin or a Custom CSS field if your theme offers one:

    /* Page Builder Widgets */
.separate-containers .panel-grid-cell .widget {
padding: 0;
}

    That will reduce a lot of the padding on the page. Your images won’t touch but that’s because they are limited by their inserted size. Consider rather inserting your images using the Visual Editor widget:http://wordpress.org/plugins/black-studio-tinymce-widget/. You can then set the image size to Full quite easily.

    The spacing around the title is more of a theme level question. You can adjust it using the following:

    /* Header */

.page-content, .entry-content, .entry-summary {
  margin: 2em 0 0;
}

    2em is the spacing you see under the page title.

    Hope that helps get you started. For more on Custom CSS you can see our tutorial here: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/

  2. 9 years, 5 months ago baumaeschi

    Hi Andrew

    Thanks a lot for analysing this issue.
    As you can see on the above referenced page pictures are now touching each other. Perfect!
    And I can exactly control the Gutter by changing the value in Row Styles / Layout / Gutter.

    One more question: Between the rows there seems to be a spacing of 4px. I can’t remove/control this space by changing parameters of page builder. Is it possible to completely eliminate the 4px spaceing between rows?

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

    Super, glad to hear you made progress there. Please try the following:

    .so-widget-sow-image {
line-height: 0;
}

    A quick reminder, all WordPress themes overwrite themselves during theme update so all Custom CSS must be a Custom CSS plugin or appropriate theme settings Custom CSS field.

    This is a comment in CSS:

    /* Hi, I'm a comment, you can use me as a title for each section in your Custom CSS */

    If you land up adding a bit of Custom CSS I recommend using comments here and there so you can come back to it later and know what is doing what.

    Hope that helps :)

  4. 9 years, 5 months ago baumaeschi

    Hi Andrew
    Perfect! Looks exactly as I wanted it. Here are two sample pages:
    http://web251.login-143.hoststar.ch/wp1/proj-8/
    http://web251.login-143.hoststar.ch/wp2/page-a/

    And thanks for the hint with the custom css. I will keep that in mind.
    Appreciate your support very much.
    Martin

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

    Great news Martin, glad to hear you’ve been making progress with Page Builder.

    All the best for your site.

    Cheers

  6. 9 years, 5 months ago baumaeschi

    Hi Andrew

    Just made some test with rows/columns containing text.
    There seems to be a similar default spacing between rows with visual editor as it is for rows with pictures.

    Example: http://web251.login-143.hoststar.ch/wp2/page-builder-text/

    Is it possible to delete this spacing with a similar custom CSS as it was for rows with images?

    Thanks
    Martin

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

    Hey Martin

    Most of that is paragraph spacing. You could try something like this:

    /* Visual Editor in PB */

.so-panel.widget_black-studio-tinymce p {
margin-bottom: 0;
}
  8. 9 years, 5 months ago baumaeschi

    Hey Andrew
    Thanks to your excellent help and SiteOrigin page builder I feel like having under control what I want to do now. Building a page just as I want it – wonderful! Thank you so much.
    Martin

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

    Awesome, really glad to hear you’re making progress.

    Chat soon, cheers :)

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