Archived topic
vertical Space between blocks, Form-width, padding
4 replies · Started by jacob on May 27, 2021
Hello! I have 2 related issues that I am hoping you can help me create CSS to address.
1. I want the email form to be the same width as the video and text above it. It seems like it is stretching to the edge of the container so I am guessing this is a padding issue that can be corrected with CSS? Do you have any suggestions?
2. The space between the text above the form and below the video is huge and I am wanting to control it, make it smaller. I am guessing that this is either a padding issue within the block, or maybe there is a way to make the spacing between blocks smaller?
Thanks!
Hi Jacob,
Try this CSS for issue 1:
.wp-block-jetpack-mailchimp {
width: 80%;
margin-left: auto;
margin-right: auto;
}For issue 2, the padding is added by WP by default, you can give the H2 title a custom CSS class like:custom-h2
https://www.screencast.com/t/VbrNap49d
Then add this CSS:
h2.custom-h2 {
padding-top: 0;
}Thank you, that solved issue #1 but not issue number 2. Padding did not change. I added the custom CSS class on the block then added the suggested CSS you gave above. I also tried using "margin-top" and adding "px" and "em" after the "0" no luck.
Any other suggestions?
PS. I have the Video Block above it set to:
figure.pfl-video-size {
margin-top: -35px;
}
which might be adding to the space between the video and the h2 block
Mainly I want to reduce the space above and below the h2 "Now Offering the 7 Dimensions of Money Free Mini E-book!" There is way too much space currently!
Thanks again Ying!
Hi there,
the heading block has a background added to it - which automatically adds padding to the block - remove the background color to resolve that.
