Morning,
I have a page where I’ve created a 2 column row with the SiteOrigin page builder. On the left column I’ve added a “Layout builder” and with that there is a widget with text and another with a button. The right coumn had 2 “Layout builders”, each with the same content.
Now I’m finding each widget has a 20px padding around it, and then a 30px margin between widgets. That leaves me with a massive 70px gap between my text widget and my button widget, and I want to decrease the gap a lot.
A few things I’ve tried which haven’t worked –
– I’ve tried reducing the padding in the layout to 0px
– I’ve tried adding a class to the widget in attributes of no-space and then in the CSS Styles I put in “.no-space {padding:0px; margin:0px;}”
– I’ve tried the above, but added more classes to the CSS, i.e. “. widget . so-panel .no-space {padding:0px; margin:0px;}”
– These last 2, I’ve added tried these on both the layout builder and the widgets within that.
Now I’m running short of ideas and I’ve still got a 70px gap between widgets Ideally the gap would be around 20-30px, so If I can remove padding from the bottom of one widget and the top of the other, or remove a padding and the margin that would be great.
Can anyone help me out with this?
The link to the page I’m working on is – http://www.fulfiluk.com/home-2/#
Many thanks in advance!
Update to this –
Since I wrote that I found out 2 things:
1. By zeroing the “Row bottom margin” in “Settings > Page Builder > Layout” I can remove the margin between rows which kind of makes sense now I think about it :)
2. I found out that you can’t remove the padding from around the widgets because the CSS styles within the “Page Builder > [Widget] > Attributes” and the padding in “[Widget] > Attribute” APPLIES TO A DIFFERENT DIV!! The padding can be decreased by added a negative margin inside the widgets custom CSS but to my mind that’s bad practice. You can add padding, but really I need to be able to amend the default 20px padding around widgets. I’ve tried overriding the stylesheet but it doesn’t work.
Hope someone can help with this, many thanks!
Tom
Hi Tom,
It looks like you’ve worked out half of the solution. The rest of it relates to the padding your theme is adding to the .widget class. Please navigate to WP AdminSettingsPage Builder, and open the Widgets tab. Untick the Add Widget Class setting.
This will however obviously remove all spacing and thus make it look a tad… well, not good. You’ll need to revise your layout settings to correct this and add the desired spacing. Alternatively, you could adjust the theme .widget CSS to not use so much padding. This can be done by navigating to WP AdminAppearanceCustom CSS and add and adjust the following CSS:
.widget { margin: 0 0 20px; padding: 20px; }(that’s the default theme widget spacing, be sure to adjust it)
You might also need to install the SiteOrigin CSS Editor.
—
To clarify, the padding is applied to the widget container rather than the widget itself for design reasons. We also don’t expect themes to add such a large amount of spacing to the base widget container.
That’s fine, thanks for your help :). I’d rather add margins manually and have it look exactly how I want!
Tom