Custom line height

Hi,

I need to create a title in extra large heading style on one line and then a line below it in medium paragraph style that is fairly close to it in line height. For some reason the default distance between the two lines is really wide and looks strange. It seems IMPOSSIBLE to adjust the distance.

If I use shift then enter I get the correct line spacing, but then I cannot change the text style, it just automatically switches to extra large heading, so the two lines are all in the same style. So i guess I want a standard paragraph space, but between a heading and a paragraph line.

How do i reduce the line height between these two lines? I don't want to adjust the global line height, just the line height between the title and the line below, on one section only. Perhaps you can do this by creating two seperate blocks and squeezing them together or something? Or a custom per-section line height?

I'm using 7.1 and the template is Novo.

Thanks!

Hopefully this image illustrates the problem....

Can anyone please help with this? My site is almost ready to go apart from one single line height adjustment.

Or is there something really basic i am missing?

Perhaps there is a hack? For example if I make a 'Newsletter' block I can use the advanced font controls to adjust the line height between the first line and second (with two different styles on each line). But then i can't remove the submit box and button. So that option doesn't work... but it's tantalisingly near to what i need!

I'm really close to subscribing but if it is not possible to adjust the line height between two lines of text when you need to, I will have to go back to square one again and start a whole new site using 7.0.

Thanks in advance!

Hi @squareface

Did you solve this? I am interested in doing this also.

Especially changing line height in summary blocks on mobile doen’t seem to work.

Just found my error for my summary block titles on mobile:

I had this code:

/* summary block titels mobile */
@media screen and (max-width:640px) {
.summary-title-link {
   font-size: 20px !important;
     line-height: 1.2 !important;
}

But needed this — so without the »link« in .summary-title :

/* summary block titels mobile */
@media screen and (max-width:640px) {
.summary-title {
   font-size: 20px !important;
     line-height: 1.2 !important;
}

On 4/8/2020 at 10:54 PM, squareface said:

How do i reduce the line height between these two lines? I don't want to adjust the global line height, just the line height between the title and the line below, on one section only. Perhaps you can do this by creating two seperate blocks and squeezing them together or something? Or a custom per-section line height?

You would need use code specifically for the block intended. Find out what your block id is with this chrome extension:

https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

Then use custom CSS do define the line height for that specific block id.

What custom css can I use to define line height for a specific block on the H4 only?  

On 7/22/2020 at 9:21 PM, sophie.elizabeth said:

What custom css can I use to define line height for a specific block on the H4 only?  

#block-id-123 h4 {
	line-height: 20px;
}

Find block id with https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

Thanks folks I hadn't noticed all this... I will investigte!

What css can I use to change the line height within a summary block on a specific page? And will this also affect the line height of the metadata within the same block

Hi I was having the same problem and couldn't figure it out for a while because I didn't know the code. But here is the code for you guys to use! 

#block-60061d1db887ce0fe99da1bd p {margin-top:-25px !important; margin-bottom:-20
  px !important;}

Make sure to change the block to yours like this #blocknumber p {margin-top:-25px !important; margin-bottom:-20
  px !important;}

Hope this helps!

Is there any chance to do this globally. That it affects every paragraph 2 on my whole site? At the moment I have to do it for every single block-id … That's a lot of work and if I set up a new page I have to do it again …

@geshon

To make the effect global just remove the block id.

p {

  margin-bottom : -20px;
  margin-top : -25px; 
  
  }

Let us know how it goes.

@JoanneLemon

If you want a site-wide change for your h tags you'll want to put your code in Design > Custom CSS.

Leave out the rel="stylesheet">. That is not CSS.