Hey,
I would like to change the size of the section “Number Counter”. Im using a custom theme.
Below you find a picture of what im trying to change. I would like to make it smaller.
Topic summary
A user seeks help resizing a “Number Counter” custom section on their Shopify theme, which appears too large on their collections page.
Initial Solutions Provided:
- Reduce counter text size by adding CSS to
base.cssorglobal.css:h1.counter-value { font-size: 75px; } - Resize icons/images using:
.number-counter-icon { width: 80px !important; }
Follow-up Issue:
After implementing the changes, the number counter section overlaps with the header on desktop view (though mobile padding is correct).
Final Fix:
Add responsive CSS to create top margin on desktop only:
@media screen and (min-width: 768px) {
.number-counter-wrapper { margin-top: 100px; }
}
Status: Issue appears resolved with all CSS modifications successfully addressing sizing and positioning problems across devices.
-
Go to Store Online-> theme → edit code
-
Assets/base.css or global.css
-
Add code below to end of file
h1.counter-value {
font-size: 75px;
}
1 Like
Thanks
I would also like to change the size of the Images/Icons
Okay, I will do it, please accept current problem as a solution
Use this code for Icon:
.number-counter-icon{
width: 80px !important;
}
1 Like
Thank you very much that worked!
Now i have only one problem the padding is good on mobile but when i switch to desktop view the number counter is behind the header how can i changed that?
Reference Images:
1 Like
Let me check it
Add this code too, it will fix the header issue:
@media screen and (min-width: 768px) {
.number-counter-wrapper{
margin-top: 100px;
}
}
1 Like