Add some space between section

Shopify Discussion

Topic summary

A user needed help adding consistent spacing between sections on their Shopify store, specifically matching the gap shown in one area (blue arrow) to another area (red arrow) that lacked proper spacing.

Solution provided:

  • Custom CSS code was shared to add spacing on desktop using media queries targeting screens 768px and wider
  • The code adjusts grid gap and item width using !important declarations
  • Initially worked only on desktop; mobile spacing remained problematic

Mobile fix:

  • Additional CSS code was provided using a max-width media query for mobile devices
  • Adjusts heading margin-top with customizable rem values (1.2rem for smaller, 2rem for larger spacing)

Important notes:

  • The solution needs to be applied to each individual section requiring spacing adjustments
  • Code should be added to the “Custom CSS” field within Shopify’s Customize section
  • Keeping CSS segregated to specific elements recommended for easier troubleshooting

Outcome: Issue resolved for both desktop and mobile views.

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

Hi,

I’ve got some issues, I’d like to add the same space as the blue arrow on the place where is the red arrow but I don’t know how to do it.

Somebody knows how to do it please?

Website: 6f3exa-pb.myshopify.com

Ca.png
Ca.png1058×654 154 KB

2

You can try this out:

-Go into Customize and find and click on this section

-At the bottom you should see “Custom CSS”

Paste This:

@media screen and (min-width: 768px) {
  .grid {
    gap: 2.7rem!important;
  }
  .grid__item {
    max-width: 48%!important;
  }
}

UPDATE: This only changes this 1 element. I noticed you have a 2 on your homepage. You will need to add this code to the other one too. You could put this in tags in your header section of your template file but it is usually best to either update your CSS file or keep the code segregated to only the elements that need it for. So typically I don’t have people I am helping put the code in the header section due to Shopify using classes for several different elements. (makes it easier to troubleshoot if other problems come up)

1 Like
3

Thanks it works really well on computer. Is there a thing to add or change in the CSS to add the same space on mobile?

4

Al I see the issue! I made it specific to desktop because I assumed it would stack and have the correct gap vertically. Lol I see the padding is terrible there as well. I gotta head on a lunch break here real fast but once I get back if no one has chimed in I will send you over the code for it. Looks like it should be pretty simple.

5

That same section in the custom CSS you can add this code:

@media (max-width: 768px) {
h2 {
margin-top: 1.8rem!important;
}
}
See if that works. You can adjust the margin to your liking. So for example 1.2rem is smaller while 2rem is larger.

1 Like
6

Thank you it’s working well now on mobile too

1 Like