Hi,
It seem that images that are displayed using the Siteorigin Image widget have a default bottom margin of 30px. I tried various methods to remove this margin, but they either only work globally (in the settings), or are too specific (using element #IDs in my CSS, which I usually avoid).
Is there a flexible way to control margins, paddings etc. of Page Builder widgets?
Thanks, Paddelboot
Hi Paddelboot,
Typically this is row margin. Which can be adjusted by opening the row by clicking the wrench to the top right of the row and then head over to the row styles sidebar. Open the layout settings group and set the bottom margin to 0.
If this doesn’t help; do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
Thanks, but I don’t want to remove the bottom margin of the row, just of the image widget/element. I added the margin: 0 to the widget’s CSS in the styles sidebar, which doesn’t have any effect unfortunately.
I will set up a staging server an post the URL here.
This is a private message.
Hi Paddelboot,
Okay so based on the markup and styling (specifically yours) I would recommend just setting it as !important. So in other words, change:
#competences .panel-grid-cell .widget_sow-image { margin-bottom: 0 ; }To:
#competences .panel-grid-cell .widget_sow-image { margin-bottom: 0 !important; }I know it’s not ideal but as it’s not going to be passed on (as in redistributed) it’s not the end of the word if you force it as there’s no real method for you to be more specific (automatically).