# Number Counter
**URL:** https://community.elfsight.com/c/css-codes/number-counter/173.md
[Latest](https://community.elfsight.com/latest.md) · [Categories](https://community.elfsight.com/categories.md) · [Tags](https://community.elfsight.com/tags.md)
---
## [Adjusting the counter to minimize unused space above and below](https://community.elfsight.com/t/adjusting-the-counter-to-minimize-unused-space-above-and-below/130611)
**Author:** [@user26576](https://community.elfsight.com/u/user26576)\
**Replies:** 1\
**Last updated:** [July 10, 2025, 3:45pm UTC](https://community.elfsight.com/t/adjusting-the-counter-to-minimize-unused-space-above-and-below/130611 "2025-07-10T15:45:42Z")
I’m using the counter in an area where I wanted to get rid of unused space above and below. Here’s my final CSS which worked out perfectly. I labeled everything for easy adjustments. This code should be added to the Cus…
---
## [Hide counter underline if it has link](https://community.elfsight.com/t/hide-counter-underline-if-it-has-link/139442)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [September 8, 2025, 3:48pm UTC](https://community.elfsight.com/t/hide-counter-underline-if-it-has-link/139442 "2025-09-08T15:48:43Z")
Add this code to Custom CSS field on your Number Counter widget’s Style tab: \[class\*='Card\_\_ContentLink-sc'\]:hover \[class\*='Counter\_\_CounterComponent-sc'\] { text-decoration: none !important; }
---
## [Move widget to the center](https://community.elfsight.com/t/move-widget-to-the-center/62977)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 2\
**Last updated:** [August 14, 2025, 12:20pm UTC](https://community.elfsight.com/t/move-widget-to-the-center/62977 "2025-08-14T12:20:21Z")
Add this code to Custom CSS field on your Number Counter widget’s Style tab: \[class\*='GridProvider\_\_Component-sc'\] { justify-content: center; }
---
## [Set custom font for all widget elements](https://community.elfsight.com/t/set-custom-font-for-all-widget-elements/25058)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 9, 2023, 12:26pm UTC](https://community.elfsight.com/t/set-custom-font-for-all-widget-elements/25058 "2023-11-09T12:26:01Z")
Although we do provide a list of fonts for you to choose for your widget, you might happen to need a custom code. If that is the case, add the code below to Custom CSS field on your Number Counter widget’s Style tab: \[…
---
## [Move all widget's elements to the left](https://community.elfsight.com/t/move-all-widgets-elements-to-the-left/91231)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [December 24, 2024, 5:31pm UTC](https://community.elfsight.com/t/move-all-widgets-elements-to-the-left/91231 "2024-12-24T17:31:43Z")
Add this code to Custom CSS field on your Number Counter widget’s Style tab: @media(min-width: 601px) { \[class\*="Main\_\_GridContainer-sc"\] { margin-left: 0; } }
---
## [Change title font (font-family and size)](https://community.elfsight.com/t/change-title-font-font-family-and-size/91229)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [December 24, 2024, 5:22pm UTC](https://community.elfsight.com/t/change-title-font-font-family-and-size/91229 "2024-12-24T17:22:42Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: \[class\*='Main\_\_Title-sc'\] { font-size: 13px !important; font-family: Helveticaneue, sans-serif !important; }
---
## [Change border radius of the counter containers](https://community.elfsight.com/t/change-border-radius-of-the-counter-containers/62981)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [July 25, 2024, 5:41pm UTC](https://community.elfsight.com/t/change-border-radius-of-the-counter-containers/62981 "2024-07-25T17:41:54Z")
Add this code to Custom CSS field on your Number Counter widget’s Style tab: \[class^='Card\_\_Component'\] { border-radius: 0px; }
---
## [Align content to the center](https://community.elfsight.com/t/align-content-to-the-center/62978)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [July 25, 2024, 5:32pm UTC](https://community.elfsight.com/t/align-content-to-the-center/62978 "2024-07-25T17:32:49Z")
Add this code to Custom CSS field on your Number Counter widget’s Style tab: \[class^='Card\_\_Component-sc'\] { align-items: center; }
---
## [Change caption font](https://community.elfsight.com/t/change-caption-font/25060)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 9, 2023, 12:30pm UTC](https://community.elfsight.com/t/change-caption-font/25060 "2023-11-09T12:30:50Z")
Add this code to Custom CSS field on your Number Counter widget’s Style tab: \[class\*="Card\_\_CardCaption-sc"\] { font-family: Merriweather; } You’re welcome to set any other font, providing it is supported by your brow…
---
## [Hide numbers](https://community.elfsight.com/t/hide-numbers/25062)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 9, 2023, 12:34pm UTC](https://community.elfsight.com/t/hide-numbers/25062 "2023-11-09T12:34:05Z")
Add this code to Custom CSS field on your Number Counter widget’s Style tab: \[class\*="Counter\_\_CounterComponent-sc"\] { display: none; }
---
## [Add shadow to counters](https://community.elfsight.com/t/add-shadow-to-counters/25065)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 9, 2023, 12:48pm UTC](https://community.elfsight.com/t/add-shadow-to-counters/25065 "2023-11-09T12:48:10Z")
Add this code to the Custom CSS field on your Number Counter widget’s Style tab: \[class\*="Card\_\_Component-sc"\] { box-shadow: 0 0 10px rgba(0, 0 , 0, 0.2); }