icon with text - center on desktop

Shopify Discussion

Topic summary

A Shopify store owner noticed their icon-with-text elements appear off-center on desktop, with uneven padding (more space on the right than left).

Two CSS solutions were proposed:

  1. Targeted fix: Add CSS to base.css targeting the specific slider ID to center-align content using justify-content and align-items properties.

  2. Grid gap adjustment: Modify the grid gap to 20px for screens wider than 750px, which redistributes spacing more evenly.

Both solutions involve editing the theme’s base.css file through the Shopify code editor. Screenshots demonstrate the visual improvement after applying the fixes. The issue remains unresolved as the original poster hasn’t confirmed which solution worked.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hello,

Is someone able to tell me how to fix my icons with text? They are slightly off center - as you will see in screenshot there is more padding on the right than the left. Thank you so much.

Ella.

URL: https://www.livwithin.com.au/

Screenshot 2025-04-15 at 13.20.41.png
Screenshot 2025-04-15 at 13.20.41.png3316×2020 1.44 MB

2

Hi @ellacoker , you can follow these steps:

Step 1: Open Online Store → Themes → Edit code

Step 2: Find base.css file

Step 3: Paste this code at the bottom of the file

#Slider-template--19130582892786__multicolumn_V6eYQ8 {
 justify-content: center;
 align-items: center;
}

Result:

B2Bridge_0-1744688681350.png
B2Bridge_0-1744688681350.png1482×483 287 KB

If this helpful, please let us know by giving us a like and marking it as a solution. Thanks

3

Hello @ellacoker
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

@media screen and (min-width: 750px) {
.grid {
gap: 20px !important;
}
}

result

106.png
106.png1029×492 215 KB

If this was helpful, hit the like button and accept the solution.
Thanks