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 post
  • Answers 15
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add to Home > Design > custom CSS div#block-yui_3_17_2_1_1594762844557_6845 h4 { margin-bottom: 5px; }  

Posted Images

15 answers to this question

Recommended Posts

  • 3

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

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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!! 

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...