[natcreatParticipant]

Hi,

I’m a designer, not a developer, but don’t hold that against me! 😉

X is generally very intuitive to use, but I need some help with modifying the size and line spacing of Counter text.

What I want to do is to reduce the overall size of a Counter on a page, i.e., the font size for the text above and below the number, the number itself, and the line spacing for each of these.

My goal is to have a Counter that has a smaller footprint on the page. I realize that this likely requires CSS manipulation, but I’m not skilled at CSS yet. Can you please help me with this issue?

Many thanks,

Mike

[Paul RModerator]

Hi Mike,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer.

.x-counter .number {
    font-size: 32px;
    line-height: 1;
}

.x-counter .text-above {
    font-size: 15px;
    line-height: 1.5;
}

.x-counter .text-below {
    font-size: 15px;
    line-height: 1.5;
}

You may change the values to achieve your desired look.

Hope that helps.

[natcreatParticipant]

Thanks! I appreciate the quick reply. It’s exactly what I needed.

[Paul RModerator]

You’re welcome! 🙂

[natcreatParticipant]

One more question about Counters: How do I change the amount of space after the .x-counter .text-above?

I used the CSS code as you suggested, and it did change the size of the text and number. However, it didn’t just scale the entire Counter as I’d wanted.

Specifically, there was too much space below the .text-above. The .number was situated correctly in relation to the space below it and the .text-below, but not in relation to the .text-above and the .number.

I tried different line-height settings and I was able to center the number horizontally between the .text-above and the .text-below, but now there is too much space above and below the .number relative to the two text lines.

All I’m trying to accomplish is to proportionally scale down the entire Counter (.text-above, .number, .text-below) so that it appears identical in spacing between lines as the stock Counter, but everything reduced in size — text and relative line spacings.

Can you tell me how to do this?

Thanks,

Mike

[ChristopherModerator]

Hi there,

The codes below are default values you can increase or decrease them based on your layout :

.x-counter .text-above {
margin-bottom: 0.5em;
}
.x-counter .text-below {
margin-top: 0.5em;
}

Thanks.

[PhilippeParticipant]

Hi,

very helpful, thank you!

May I add a question?

How do I change the size of the text before or after the counter? If I resize the counter, the currency sign is still the same massive size. 🙂

Thanks,

Philippe

[John EzraMember]

Hi Philippe,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

span.prefix {
    font-size: 30px;
}

span.suffix {
    font-size: 30px;
}

Hope this helps – thanks!

[PhilippeParticipant]

Ahh! It helped indeed, thank you very much! (Thanks especially for the speed of your reply!) 🙂

[Paul RModerator]

You’re welcome! 🙂

[PhilippeParticipant]

OK new issue which I didn’t notice before. How do I change the vertical alignment of the counter?

I’ve put it in a table:

<table>
<tr>
<td>item name</td>
<td>x-counter</td>
</tr>
</table>

Now it seems strange as the item in the table seems to be aligned either centre or top, whilst the counter seems aligned bottom. Where do I change that?

Regards,

Philippe

[ChristopherModerator]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[PhilippeParticipant]

This reply has been marked as private.

[John EzraMember]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-counter .number-wrap {
    font-size: 0;
}

Hope this helps – thanks!

[PhilippeParticipant]

Worked like a charm! Thank you!

[Author]

Posts