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

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

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

Share this post


Link to post

13 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

Share this post


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

Share this post


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.

Share this post


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

Share this post


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  Armadillo - Free portfolio template

Share this post


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  Armadillo - Free portfolio template

Share this post


Link to post
  • 0

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?

Share this post


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

Share this post


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  Armadillo - Free portfolio template

Share this post


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