Reduce padding between content elements
There’s too much white space between my headings and my text, and between paragraphs of text. I need to reduce the padding somewhere, but I skimmed over the CSS and couldn’t find anything that seemed relevant (e.g. “header block” or “padding-h1”). Thanks.
This is our free support forum. Replies can take several days.
Need fast email support? Get SiteOrigin Premium
Replies
5Hi, please send a link to a page concerned and I’ll take a look. Thanks.
thanks:
https://lisbethcampbell.com/the-vanished-queen/about-vetia/
Hi, thanks for the link.
The space comes from the theme’s default margins. Vantage gives each paragraph and heading in the content area a 1em top and bottom margin. On your site that is about 20px around paragraphs and 22–28px around headings.
To reduce it, add the CSS below in Appearance > Custom CSS if you use SiteOrigin CSS. You can also use Appearance > Customize > Additional CSS. These rules are global: they change the spacing in the content area of every post and page, not only this one.
.entry-content p { margin: 0 0 0.6em; } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { margin: 1.2em 0 0.3em; } .entry-content .wp-block-group.is-layout-flex > p { margin: 0; }The last rule is for the “Vetian Inheritance and Nobility” section. Those two paragraphs are inside a Group block, which adds its own gap between items, so the space there is about double. To fix only that section, select the Group block and set Dimensions > Block spacing. If you don’t need the Group block, you can select it and choose Ungroup.
Change the em values to suit. A smaller number gives less space.
I hope that helps.
Thanks for the CSS, that’s very helpful.
I cannot find anything that allows me to set group dimensions or ungroup.
I have the Site Origin editor plug-in, and it’s activated, but whenever I try to edit a page I just get the WP visual editor with no option anywhere to switch to the Site Origin. The only time I see it is when I create a new page. Seems like if I “revert to editor,” I can’t reset to the SO editor. Happy to send screenshots if it would help.
Hi, you’re welcome.
You don’t need to change the Group block. The last rule in the CSS already fixes that section. Add all three rules in Appearance > Custom CSS if you use SiteOrigin CSS, or in Appearance > Customize > Additional CSS. When they are saved, the spacing is done.
For reference, you can find the Group settings in the Block Editor. Click the text in that section. Then click the “Select parent” button at the left of the block toolbar to select the Group block. The Block spacing setting is in the Styles tab of the sidebar on the right. Ungroup is in the ⋮ menu of the block toolbar.
About Page Builder: this page was made in the Block Editor, and it will stay in the Block Editor. There is no button to switch it to the Page Builder interface. To use Page Builder in the Block Editor, add a SiteOrigin Layout block to the page. You don’t need Page Builder for this spacing fix.