Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


hansmaulwurf

Question

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!

Edited by hansmaulwurf
Initial Revision
Link to comment

19 answers to this question

Recommended Posts

  • 0

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:alt text

And this is after:alt text

Hope that helps.

B.

screen-shot-2017-05-06-at-12625-pm.png.87973e74296cbd8b1665720fe0d586e4.png

screen-shot-2017-05-06-at-12607-pm.png.bd6a0d3807de373deff5efd655c32f57.png

Link to comment
  • 0

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.

Link to comment
  • 0
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:

alt text

h3topmargin.gif.a223a27952110aa51adb46bc3144abae.gif

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

Link to comment
  • 0
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
Posted (edited)

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? 

 

Edited by chrisshaddock
Link to comment
  • 0
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;}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
Posted (edited)

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. 

 

Edited by chrisshaddock
Link to comment
  • 0
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;}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...