How to reduce space between different text styles in same text block

Hi,

I am using Rover and have text blocks in which I use different text styles (h2, h3, and normal text). Squarespace adds ugly large blanks between the text lines that use different styles and I can't figure out how to remove these blanks.

Holding shift+enter does not work, as it won't allow me to then use separate styles.

Adjusting the line-height only affects the height within the same text style, not the space between different styles.

My page can be accessed here: http://bit.ly/2qLDxt0The problem can be found when scrolling down to ".02 programme"

Many thanks for your help!

Hi,

You can reduce the spacing between text styles by editing the top and bottom margins. However I wouldn't recommend making them all zero since some whitespace between text blocks improves readability.

You can try by editing only your body text's top margin, so there's less spacing between titles and body:

p {
 margin-top: 0;
}

I tried it on a section of your page between the Marta Halina title and her bio, this is before:

And this is after:

Hope that helps.

B.

Hi BeatrizC,

Thanks a lot for your prompt answer!

The picture you posted is exactly how I would like it to look. I tried adding the CSS code you provided to my "Custom CSS" section, but it doesn't seem to change anything. How exactly did you get it to have the effect as shown on your picture? I tried targeting the specific text block by identifying its ID, but that didn't seem to do the job.

Thanks again for your help.

You can also try adjusting the margins for each style format.

For example, if you have a title in H2 and a subtitle in H3, and you want to reduce the space and move the subtitle next to the H2 title, you can use this code:

h3 {
  margin-top: -15px !important;
}

Here's how it would work:

That solved the problem!

Thank you very much! :)

On 5/14/2017 at 12:08 AM, A_Helping_Hand said:

You can also try adjusting the margins for each style format.

For example, if you have a title in H2 and a subtitle in H3, and you want to reduce the space and move the subtitle next to the H2 title, you can use this code:

h3 {
  margin-top: -15px !important;
}

 

 

Here's how it would work:

Hi 🙂
I am looking for a fix for this too and i've used your code which works on desktop. Is there a way to get it to work on mobile too?

Cheers
Claire

20 minutes ago, Claire_auck said:

Hi 🙂
I am looking for a fix for this too and i've used your code which works on desktop. Is there a way to get it to work on mobile too?

Cheers
Claire

If you share link to your site, we can check easier.

Hey Tuaphan, nice to hear from you 🙂

It's the main banner, I am trying to reduce the space between the main H4 title and the H3 heading.

https://compass-pilates.squarespace.com/
pa33word

Thanks for looking into this for me.
Cheers
Claire.

15 minutes ago, Claire_auck said:

Hey Tuaphan, nice to hear from you 🙂

It's the main banner, I am trying to reduce the space between the main H4 title and the H3 heading.

https://compass-pilates.squarespace.com/
pa33word

Thanks for looking into this for me.
Cheers
Claire.

 

Add to Home > Design > custom CSS

div#block-yui_3_17_2_1_1594762844557_6845 h4 {
    margin-bottom: 5px;
}

So clever...it works perfectly, thanks @tuaphan.
I have another spacing question for the same page, do you want me to add a new question in the forum?

2 minutes ago, Claire_auck said:

So clever...it works perfectly, thanks @tuaphan.
I have another spacing question for the same page, do you want me to add a new question in the forum?

yes, create new question

Hey @tuanphan.

I am trying to apply the same logic to another banner at the bottom of the timetable page but I can't seem to get it to work. I have tried selecting different #block numbers but none of them are reducing the gap this time...what am I doing wrong? Help!! 

4 minutes ago, Claire_auck said:

Hey @tuanphan.

I am trying to apply the same logic to another banner at the bottom of the timetable page but I can't seem to get it to work. I have tried selecting different #block numbers but none of them are reducing the gap this time...what am I doing wrong? Help!! 

div#block-b70ac4ff46a1e3c26c44 h4 {
    margin-bottom: 5px;
}

Amazing, thank you 🙂

@Claire_auck how did you get your instagram feed like that? 

On 8/31/2020 at 11:14 AM, jcsport123 said:

@Claire_auck how did you get your instagram feed like that? 

Hi @jcsport123.
I only just saw this message, sorry!
Did you work out your Instagram feed?

Reviving the thread months later...

Hoping @tuanphan or @beatrizc can help. 

I am also trying to reduce the space between a blocks. I have this page www.10peaks.ca/speakers. Inserting a soft line break (shift+return) looks successful in edit mode but whenI view the live published page it doesn't break. A Squareapce support person in chat said this is a know issue. So I inserted the speakers credentials in the paragraph but now want to decrease the space between the H4 and the P2. I tried the modified versions of the code above nothing is working. Can someone help me out with a suggestion, please? 

17 hours ago, chrisshaddock said:

Reviving the thread months later...

Hoping @tuanphan or @beatrizc can help. 

I am also trying to reduce the space between a blocks. I have this page www.10peaks.ca/speakers. Inserting a soft line break (shift+return) looks successful in edit mode but whenI view the live published page it doesn't break. A Squareapce support person in chat said this is a know issue. So I inserted the speakers credentials in the paragraph but now want to decrease the space between the H4 and the P2. I tried the modified versions of the code above nothing is working. Can someone help me out with a suggestion, please? 

 

Add to Design > Custom CSS

/* Speakers space between h4-p */
body#collection-60a2c4f4b6d718746e07666e {
	h4, p {margin: 0px !important;}
}

Thanks @tuanphan For responding so quickly. 

I tried the code in the Design> Custom CSS. It removed the space between the all caps P2 paragraph and the lower case paragraph. I would like to keep that space but remove the space between the H4 and the P2. I am trying to make the all caps paragraph look like sub head to the H4. Do you have more ideas? I managed to make it happen with a <style> P { margin-top: 0px }</style> as a code block on the page but I came back to it today refreshed and it didn't work again. 

On 5/22/2021 at 4:34 AM, chrisshaddock said:

Thanks @tuanphan For responding so quickly. 

I tried the code in the Design> Custom CSS. It removed the space between the all caps P2 paragraph and the lower case paragraph. I would like to keep that space but remove the space between the H4 and the P2. I am trying to make the all caps paragraph look like sub head to the H4. Do you have more ideas? I managed to make it happen with a <style> P { margin-top: 0px }</style> as a code block on the page but I came back to it today refreshed and it didn't work again. 

 

try this

/* Speakers space between h4-p */
body#collection-60a2c4f4b6d718746e07666e {
	h4, p:not(.sqsrte-large):not(.sqsrte-small) {margin: 0px !important;}
}

I'm trying to do something similar. Have used CSS code to alter the size of my blog post title font on mobile, but now have a large whitespace between the blog title and opening paragraph. I've tried a few things to reduce the margin and padding, but no luck so far. What css do I need to reduce the size of whitespace? screenshot in SS editor attached. Link to same live blog post also below. thx

https://www.kennywallace.co.uk/case-studies/leadership-narcissist-sociopath-psychopath

On 9/29/2023 at 5:26 PM, KennyWW said:

I'm trying to do something similar. Have used CSS code to alter the size of my blog post title font on mobile, but now have a large whitespace between the blog title and opening paragraph. I've tried a few things to reduce the margin and padding, but no luck so far. What css do I need to reduce the size of whitespace? screenshot in SS editor attached. Link to same live blog post also below. thx

https://www.kennywallace.co.uk/case-studies/leadership-narcissist-sociopath-psychopath

Use this CSS code to remove spacing under title on mobile

/* Mobile blog title spacing */
@media screen and (max-width:767px) {
.blog-item-top-wrapper {
    margin-bottom: 10px !important;
}
}

Worked a treat, Thank you!