Add Interval (text) above price in Pricing Table

Support
#1

I am looking to add some text “Starting at” above the price in the pricing table. Basically I just want an additional “interval” text spot above the price. Is there a way to do that?

See screenshot for example.

#2

Hey,

You can add this text adding a content property inside a before rule. So, to assist you better, can you provide your website link?

#5

Here you go

#6

Hey,

Now, adding following CSS under the code below to X > Launch > Options > CSS

.x-price:before {
   display: block;
   content: "STARTING AT";
   text-align: center;
}
#7

Can you change the size of the font? if so how?

#8

Hey @Cariwaiian,

You can add the font-size property at this rule:

.x-price:before {
   display: block;
   content: "STARTING AT";
   text-align: center;
   font-size: 10px;
}
#9

Thanks! That worked but now there is no space between the words in the content.

#10

Hello @Cariwaiian,

To get the style exactly as you want, you may need to tinker with various typography options:

Additionally, you may need to adjust margins to get the spacing correct:

You can add any of these CSS properties to the current code given to make adjustments as necessary.

Cheers!

#11

Thanks. I’ll play with some of those parameters but I’m referring to the fact that if I type “Starting At” it appears as “StartingAt”, which it didn’t do before i changed the font size.

#12

Hi There,

You need to add letter-spacing property

The letter-spacing property is the one that controls how far or close the text will be.

The price has a letter-spacing of -3px which your “STARTING AT” text inherited.
On a small text letter-spacing: -3px; is too close if not overlaps.

Hope it helps,
Cheers!