I need help reducing the space between the coloured header and the paragraph below.
I already have code set up to reduce the spacing between paragraphs but I have converted the header paragraph with the background colour to a group so I can add the background colour. I have added padding the the bottom of the paragraph.
The page I need help with: [log in to see the link]
I am glad you reached out, and I’m happy to help you clear up that extra spacing.
After checking your website, the issue is coming from a combination of two specific settings: the Boxed Layout and the Content Vertical Padding.
When you select the “Boxed” style, the theme naturally adds some breathing room around the content to create that distinct “box” effect. Additionally, the “Content Vertical Padding” adds a specific amount of space at the top and bottom of your content area, which is likely why you’re seeing that gap between your header and the first paragraph. Check the screencast for reference: https://share.zight.com/4guqeKlp
If you want to keep the boxed content style but remove that top gap, you just need to disable the vertical padding in your settings:
Open the Customizer: Go to Appearance > Customize.
Navigate to Layout Settings: Go to Posts/Pages Layout > Page Layout.
Toggle Vertical Padding: Look for the Content Vertical Spacing setting.
Set to “Disable”: Changing this to “Disable” will pull the first paragraph up to meet the header area.
Pro-Tip: If you only want to change this for one specific page, you can also find these settings in the Page Settings while editing that page in the block editor. https://share.zight.com/Z4u9l7Kz
Just checking in on this issue. It looks like you may have resolved the problem. If not, can you further describe the issue and/or provide a screenshot or screenshare? We often use Zight to make it easier to share (just copy/paste a link to your image/video).
If your issue has been resolved, please go ahead and mark this thread as resolved.
Thank you for clarifying. The screenshot was very helpful!
The spacing your are seeing is due to the fact that the WP Group (when using Kadence) has a default bottom margin. To change it, select the group (not the text inside the group) and click the Styles tab in the settings. Scroll down to the MARGIN section where you’ll see a slider. You can either drag it to the middle and back to the left to set it to none, or you can click the “Set custom size” to the right of the slider and manually set the margin size. To control the top/bottom margins separately, click the “Unlink” icon just above the field to view separate controls. (view screenshot here).
I hope that helps! Please let me know if you have any trouble or if we can do anything else to assist.
