Reduce Space Between Blocks (Ride 11.0)

Store Design
, , , ,

Topic summary

A user working with the Shopify Ride 11.0 theme wanted to reduce spacing between page sections to achieve a tighter layout similar to Apple’s website. Despite setting the theme’s built-in spacing option to 0px and reducing section padding, gaps remained.

Troubleshooting steps attempted:

  • Initial CSS targeting .section class with custom margin values
  • Alternative targeting of .shopify-section and .index-section containers
  • Removing both margins and padding using !important declarations

Solution:
The issue was resolved by adding CSS to theme.css or base.css that specifically targets .shopify-section with adjusted padding values:

.shopify-section {
    padding-top: 2rem;
    padding-bottom: 2rem; 
}

The user confirmed this approach worked, with the recommendation to adjust the rem values (e.g., to 1rem) for tighter spacing as needed. The solution addresses how Ride theme applies spacing through section wrapper containers rather than individual section classes.

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

Hi all,

We’re using Ride 11.0 as our template. I’ve already adjusted ‘theme settings → layout → space between templates’ to 0px. It still hasn’t gotten our desired outcome; we’d like the gaps to be narrower, similar to the Apple website.

Our website is trdrplus.com, password is ‘Pyramids’. Could someone please advise on how we could use CSS to reduce the gaps between our sections?

2

You can reduce the spacing manually with CSS.
In your Shopify admin, go to:
Online Store → Themes → Edit code → Assets → base.css (or theme.css)
and add this at the bottom:

/* Reduce spacing between sections */
.section {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

You can adjust 20px to make it tighter (e.g. 10px).

Some themes wrap sections in containers like .shopify-section or .index-section, so if the above doesn’t work, replace .section with one of those classes and test again.

if this does not work remove this and tell me

Glad to help!
I’m a Shopify developer with seo expertise, so if you ever need assistance setting up or improving your store, feel free to reach out.
– Hammad

3

Hi Hammad,

I tried all 3 versions of that code, and none of the 3 provided the desired outcome. Just to add, we have also already reduced padding on all sections to try resolve the problem.

Is there any other CSS solutions you could recommend?

4

Thanks for the update. In that case, try targeting the Shopify section wrapper instead — some themes (like Ride) apply spacing through those containers.
Add this to your base.css (or theme.css):

.shopify-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

If you still see extra gaps, inspect the specific sections in your browser (right-click → Inspect) to check which class controls spacing — sometimes it’s .index-section or .section-template--<name>.

if this does not work , send me screen shots for sections after placing this code.

sorry for delay in response

Hope this helps!
– Hammad | Shopify Developer

5

Also try this with .section class

7

no, screenshots of sections after apply code. this code is working here to me.

8

Hi @TR_AC,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.shopify-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

You can adjust the 2rem value to be smaller (e.g., 1rem) or larger to get the exact spacing you prefer. After adding and saving the code, the changes should be immediately visible on your website.

Thank you!

9

Thanks so much, this ended up working. Appreciate your guys’ support!

1 Like