Widget spacing – exception

  • west88

    (@west88)


    10 years, 10 months ago

    Hi, I read dozen of different topics about setting up margins in PageBuilder. But from all the suggestions from them I can only edit main Pagebuilder settings.

    I am happy with overall Settings -> PageBuilder 30px bottom margin.

    However I would like to have one row where all the widgets inside it have 0 margin. I understand that I need to add additional CSS for that to work. But I don’t know what CSS should it be and afterwards in which line inside pagebuilder row/widget should I put reference to it (class / css style ?)

    Any explenation would be appreacieted.

    https://ww.wp.xz.cn/plugins/siteorigin-panels/

Viewing 1 replies (of 1 total)
  • Plugin Support Andrew Misplon

    (@misplon)

    10 years, 10 months ago

    Hi @west88

    Thanks for reaching out.

    Setting something like this up will get easier as Page Builder progresses. For now, we do need a little Custom CSS. If you want to make your own way through tasks like this it’s important that you know how to use your browser’s inspector tool. It’s bundled in the developer section of most browsers. It’ll let you inspect the row, cell and widget and see where styles are being applied.

    If you’re keen on an overview of row, cell and widget classes, check out my rough overview thread here:

    https://siteorigin.com/thread/how-do-page-builder-row-attributes-work-row-class-cell-class-and-css-styles/

    1. Edit the row in question. Click Attributes top right.
    2. Locate the Cell Class field and enter:

    no-bottom-margin

    Class name totally up to you.

    3. Go to Appearance > Custom CSS and target our new class:

    /* Page Builder Custom Classes */

.panel-grid-cell .no-bottom-margin .so-panel {
	margin-bottom: 10px !important;
}

    Adjust the value as required.

    Let us know how you come along.

Viewing 1 replies (of 1 total)

The topic ‘Widget spacing – exception’ is closed to new replies.