Adjusting the counter to minimize unused space above and below

CSS Codes Number Counter
1

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:

/* 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 */
}
3 Likes
2

Hi there, @user26576 and welcome to the Community :waving_hand:

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 :wink:

1 Like
3

A post was split to a new topic: Remove spacing between counter and caption