Add space between icons

Store Design
, , ,

Topic summary

A user seeks help adding more spacing between homepage icons on desktop, as theme settings don’t provide this option.

Two CSS solutions proposed:

  1. Method 1 (Moeed): Add custom CSS via theme.liquid file by inserting code above the </body> tag

  2. Method 2 (Rahul_dhiman): Add CSS directly to theme.css file using a media query targeting screens 768px and wider:

    • Targets .float-grid.grid--stacked.grid--uniform class
    • Applies display: flex, gap: 4.5rem, and padding-left: 3rem
    • Uses !important flags to override existing styles

Both solutions involve editing theme code files. The second method includes specific CSS properties and a visual result screenshot. Status: Solutions provided, awaiting user confirmation of which approach worked.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hi, can anyone help me add more gap between these items on the homepage for desktop ? I don’t have the option in the settings and they are a bit too close to each other

Password: daumas

Daniel19901_0-1732356480344.png
Daniel19901_0-1732356480344.png1911×373 34.5 KB

2

Hey @Daniel19901

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1732356977078.png
Moeed_0-1732356977078.png1880×741 137 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

HEllo @Daniel19901
Go to online store ----> themes ----> actions ----> edit code ---->theme.css
add this code at the end of the file and save.

@media screen and (min-width: 768px) {
.float-grid.grid--stacked.grid--uniform {
display: flex;
gap: 4.5rem !important;
padding-left: 3rem !important;
}
}

result

23.png
23.png1520×919 180 KB

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