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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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;
}

 

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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.