Jump to content

Padding around Text Highlight features

Recommended Posts

Hey everyone

Just wondering if any knows how to increase the padding around the text so the text is not touching the purple background. Essentially I want to increase the size of the purple background.

This text has been done using the highlight feature

I have tried using CSS and doesn't seem to do much apart from move the text to the right only.

Any help would be greatly appreciated

Thank You

image.thumb.png.6e65ca9b64ebe214077545019c3c8346.png

image.png.fc1c35b940dbf1bfea10e53cdacb44ac.png

Link to comment

You can try this Custom CSS, it will apply to all highlights you have on your website:

.TextShape-node {
  font-size:3rem !important;
}

Adjust the 3rem if you want it bigger or smaller.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
11 hours ago, Ziggy said:

You can try this Custom CSS, it will apply to all highlights you have on your website:

.TextShape-node {
  font-size:3rem !important;
}

Adjust the 3rem if you want it bigger or smaller.

That worked in a way! Thank you! 🙏

Is there a way to adjust the top and bottom separately to the sides?

This method adjusts every side so the highlight border touches the other letters.

image.png.2a963cde3348d1e7db898ea5468779b7.png

Link to comment
11 hours ago, vk2020 said:

Is there a way to adjust the top and bottom separately to the sides?

Not that I've found. I would try adjusting the 3rem to a value a little smaller to see if that helps.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 11 months later...

.TextShape-node
{  font-size:4.5rem !important;
}

#block-53d1530ccf562844fc87 h1 {
  line-height: 1.8em !important;
  font-size: 2.5em;
}


Then add      margin-top: -10px;

Your welcome 😀

Edited by ebonncharles
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.