How to Add Background Colour Under Text Without Stretching Across Column Width

[core365]

Hi, I’d like to add a background block of colour to some text without it stretching across the whole width of the column (that’s only the current option I can find in Cornerstone) - so there’s a padding of about 10px around text containing the background colour. I’ve included a pic of what I’m hoping to achieve!

Thanks!

[Prasant]

Hello @core365,

Thanks for asking.

Can you please share the page URL so we can give you the CSS to add background color in text?

Thanks.

[core365]

Ok, thanks! I’ll put it in a secure note as it’s on a temporary link.

[Prasant]

Hello @core365,

Thanks for sharing website URL.

1. First, I suggest you to select the background color in Text Element. https://cloudup.com/cYJHQEwnTOM
2. After that please add Class name to text element. https://cloudup.com/cz4rLCLbdNo
3. Add following CSS under X > Theme Options > CSS:

.text-element-class {margin: 0 auto; width: 50%; display: block;}

Please note that you can change the class name text-element-class as per your requirement.

Let us know how it goes.

Thanks.

[core365]

Hi, that’s great, thanks! However, I’ve tried to get it to be in the centre of the column, and the text-align is set to centre for both the column and the text, and I’ve tried adding CSS for it to text align centre too, but it just won’t move to the centre! So I’ve added the CSS: margin-left: 30%; which isn’t ideal, as when it comes to viewing on smaller mobile devices, I have to change the width of the text-element-color and then change the margin-left percentage too, so it’d be fab if you know how to get it to align centre without having to do it with various margins for each screen size!

Hope that makes sense!

Thanks!

[basanta]

Hi There,

Instead of margin left 30%, please add margin: auto; it will fix your issue.

Hope this helps!

Thanks

[core365]

Hi, that’s sorted it, thank you!

Thanks for your help and time with this!

[mldarshana]

Glad we were able to help