Hello,
Is someone please able to tell me why my icon with text is not perfectly centered on desktop? There’s a little more space to the right than the left. Please see screenshot for reference.
Thank you!
Topic summary
A Shopify store owner noticed their icon-with-text section appears off-center on desktop, with more space on the right than left.
Quick Solutions Offered:
- Add
justify-content: center;to.multicolumn-listin the section’s Custom CSS - Alternative centering approaches were suggested with visual examples
Root Cause Identified:
The issue stems from custom CSS that modifies grid gap spacing:
- A broad CSS rule sets
.grid { gap: 2px!important; }for screens 750px+ - This breaks the grid’s width calculations, which rely on CSS variables
- Grid items no longer fill the parent container’s full width, creating asymmetric spacing
Recommended Fix:
Instead of overriding gap directly, modify the CSS variable in layouts/theme.liquid:
.grid { --grid-desktop-horizontal-spacing: 2px; }
This approach maintains proper grid calculations while achieving the desired spacing.
The discussion remains open for the original poster to implement and confirm the solution.
1 Like
Hi @ellacoker
Please add this code to Custom CSS of that section.
.multicolumn-list { justify-content: center; }
Not sure if you’re interested in explanation (given that @Dan-From-Ryviu ) has a reasonable answer, but here it is:
You’ve added a CSS rule:
@media screen and (min-width: 750px) {
.grid {
gap: 2px!important;
}
}
However:
-
This is a very broad rule and covers a lot of elements.
-
These elements (grid) usually use a CSS variable to calculate a gap between children elements, and also the (!) width of these elements.
So when you’ve changed the gap like you did, the grid item element width calculation is still done based on the old variable value, this is why your grid items do not cover entire parent element width as show on the screenshot.
You can fix the problem by changing the variable on the element, like on this screenshot below:
However, in my opinion a better fix would be to modify the original “offending” CSS rule to set the variable instead like this:
@media screen and (min-width: 750px) {
.grid {
--grid-desktop-horizontal-spacing: 2px;
}
}
This will automatically set the gap and fix the grid element width calculations.
(the code to modify is in your layouts/theme.liquid, somewhere above the tag).