# Adjusting the counter to minimize unused space above and below

**URL:** <https://community.elfsight.com/t/adjusting-the-counter-to-minimize-unused-space-above-and-below/130611>\
**Category:** Number Counter\
**Created:** [July 10, 2025, 2:57pm UTC](https://community.elfsight.com/t/adjusting-the-counter-to-minimize-unused-space-above-and-below/130611 "2025-07-10T14:57:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![user26576](https://avatars.discourse-cdn.com/v4/letter/u/df788c/32.png) [@user26576](https://community.elfsight.com/u/user26576)\
**Post date:** [July 10, 2025, 2:57pm UTC](https://community.elfsight.com/t/adjusting-the-counter-to-minimize-unused-space-above-and-below/130611/1 "2025-07-10T14:57:51Z")

</div>

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 Custom CSS field on the Style tab of your widget’s settings:

```auto
/* Main Section Container */
[class*="Main__Component-sc"] {
  margin-top: 0 !important; /* No space above the entire counter section */
  padding-top: 0 !important; /* No padding above */
  margin-bottom: 5px !important; /* Minimal space below */
  padding-bottom: 0 !important;
}

/* Grid Container */
[class*="Main__GridContainer-sc"] {
  padding-top: 0 !important; /* No space above the grid of counters */
  padding-bottom: 0 !important; /* No space below the grid of counters */
}

/* Grid Provider (Internal Grid Padding) */
[class*="GridProvider__Component-sc"] {
  padding-top: 0 !important; /* No space above the counter grid content */
  padding-bottom: 0 !important; /* No space below the counter grid content */
}

/* Individual Counter Card*/
[class*="Card__Component-sc"] {
  margin-top: 2px !important; /* Minimal space above each counter card */
  margin-bottom: 2px !important; /* Minimal space below each counter card */
}

/* Card Content Link/Div (Handles both link and non-link cards) */
[class*="Card__ContentLink-sc"] ,
[class*="Card__ContentDiv-sc"] {
  padding-top: 2px !important; /* Minimal space above card content */
  padding-bottom: 2px !important;/* Minimal space below card content */
}

/* Icon Container (Prevents Clipping)*/
[class*="Icon__IconContainer-sc"] {
  margin-top: 1px !important; /* Tiny space above the icon to prevent clipping */
  margin-bottom: 0 !important; /* No space below the icon */
  padding-top: 1px !important; /* Tiny padding above the icon */
  padding-bottom: 0 !important; /* No padding below the icon */
}

/* If your icons are nested, target the next container too */
[class*="Icon__IconContainer-sc"] {
  margin-top: 1px !important;
  padding-top: 1px !important;
}

/* Directly target SVG icons if needed */
.injected-svg {
  margin-top: 1px !important;
  padding-top: 1px !important;
}

/* Counter Number (The Stat Itself)*/
[class*="Counter__CounterComponent-sc"] {
  margin-top: 1px !important; /* Minimal space above the counter number */
  margin-bottom: 2px !important; /* Slightly more space below to prevent clipping */
  padding-bottom: 1px !important; /* Ensures descenders are visible */
}

/* Counter + Caption Block (Holds the number and its label) */
[class*="Card__CardCounterAndCaption-sc"] {
  padding-top: 1px !important; /* Minimal space above the number/caption block */
  padding-bottom: 2px !important; /* Extra space below the caption */
}

/* Caption Text (Prevents Clipping) */
[class*="Card__CardCaption-sc"] {
  padding-bottom: 2px !important; /* Prevents caption text from being clipped */
  line-height: 1.1 !important; /* Ensures descenders (g, y, p, etc.) show fully */
}

```

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [July 10, 2025, 3:45pm UTC](https://community.elfsight.com/t/adjusting-the-counter-to-minimize-unused-space-above-and-below/130611/2 "2025-07-10T15:45:42Z")

</div>

Hi there, @user26576 and welcome to the Community 👋

I’ve just slightly adjusted the code, the part after `sc` in the class names isn’t required, so I’ve removed it.

But, in general, your code works great - a huge thank you for such a detailed solution 😉

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [February 2, 2026, 1:49pm UTC](https://community.elfsight.com/t/adjusting-the-counter-to-minimize-unused-space-above-and-below/130611/3 "2026-02-02T13:49:24Z")

</div>

A post was split to a new topic: [Remove spacing between counter and caption](https://community.elfsight.com/t/remove-spacing-between-counter-and-caption/143643)