Padding around Text Highlight features

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

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.

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.

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.

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