Jump to content

Overlap block line-height

Recommended Posts

I've noticed an unusual problem: the line-height for my text is different in Overlap Image Blocks than it is across the rest of my site (it appears to just be overlap blocks, not other image block types.) Turns out something is applying a line height change, but I didn't add this!

line-height: 1.5 !important;

How do I target all overlap image blocks in my site with css, so that I can customize the line-height in a way that overrides this? I tried the following with no success:

.sqs-block-image .design-layout-overlap .image-title {
  line-height: 1.2 !important;
}

 

Screen Shot 2020-04-03 at 9.25.53 AM.png

Link to comment
  • 11 months later...
21 hours ago, cjarne said:

Hi @tuanphan, I'm having this same issue and would love your thoughts if you're still willing. I can send you the login details? Thank you so much in advance!

Can you share link to page where you added overlap block? WE can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 6 months later...

Hi, I am also having the same issues. You will find the overlap image blocks on the home page (News).

Here is the link: 

www.madeofair.com

I tried lots of different css codes - its strange because the code successfully allows me to increase the line height, font size, letter spacing with no problem, but it will not allow me to reduce the line height of in the image block overlap areas. 

Let me know if I can provide you with any other information. 

Many thanks in advance, 

Kristen

Screen Shot 2021-10-13 at 6.32.35 PM.png

Link to comment
15 hours ago, god69 said:

Hi, I am also having the same issues. You will find the overlap image blocks on the home page (News).

Here is the link: 

www.madeofair.com

I tried lots of different css codes - its strange because the code successfully allows me to increase the line height, font size, letter spacing with no problem, but it will not allow me to reduce the line height of in the image block overlap areas. 

Let me know if I can provide you with any other information. 

Many thanks in advance, 

Kristen

Screen Shot 2021-10-13 at 6.32.35 PM.png

You mean reduce this space?

image.thumb.png.a0f5d3ee84d08993a5844a39f9a0a507.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan Thank you for your quick reply.

No, not that space. I am referring to the line height in the title text on the overlap image blocks. 

.sqs-block-image .design-layout-overlap .image-title {
  line-height: 1.2 !important;
}

The title text here has a larger line height than the rest of my site. I tried to change it with css and can successfully change certain elements of the title and subtitle text, but it will not allow me to reduce the line height any smaller than what you see here. 

Side note: I am using squarespace 7.1 

844805596_ScreenShot2021-10-14at12_49_55PM.thumb.png.55e1a3a16e27dce277fc737c22f0a5e0.png

Link to comment
2 hours ago, god69 said:

I am referring to the line height in the title text

Have you tried:

.sqs-block-image .design-layout-overlap .image-title * {
  line-height: 1.2 !important;
}

 

 

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.