Solved

What is the process for reducing spacing on Shopify elements?

Queenofgifts
Excursionist
15 0 4

Dear, 

Could someone help to:

Reduce the space between the main/header photo and ''Category'' (Collections); and Rich Text section (after the Categories) - I don't need the spacing to disappear completely, just to reduce, say by 50%. I have tried few codes, shared in this forum, however, it did not work for me. 

Screenshot 2021-11-03 at 20.38.04.pngScreenshot 2021-11-03 at 20.39.31.png 

Shop URL: https://box-and-bow-nl.myshopify.com/

Password: diekla

Many thanks, 

Asta 

Accepted Solution (1)
Nick_Marketing
Shopify Partner
1487 336 462

This is an accepted solution.

@Queenofgifts 

This code should address the "Modern Gifting" section margins

@media screen and (min-width: 769px) {
#shopify-section-1635612357e56831df {
  margin-top: 45px;
}

.rich-text .section-header {
margin-bottom: 6px;
  }
}

 

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).

View solution in original post

Replies 5 (5)

Nick_Marketing
Shopify Partner
1487 336 462

Try adding this code to the bottom of theme.css

 

@media screen and (min-width: 769px) {

#shopify-section-featured-collections {
    margin-top: 45px;
}
.section-header.text-center {
  margin-bottom: 25px;
}
#shopify-section-featured-content {
      margin-top: 45px;
}
}

 

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
Queenofgifts
Excursionist
15 0 4

@Nick_Marketing 

Thank you, Nick - it actually worked! 

Just the part straight after the body text section "Modern Gifting" seems still large - can I tweak your code to address that space as well?

Thanks, 

Asta

Nick_Marketing
Shopify Partner
1487 336 462

This is an accepted solution.

@Queenofgifts 

This code should address the "Modern Gifting" section margins

@media screen and (min-width: 769px) {
#shopify-section-1635612357e56831df {
  margin-top: 45px;
}

.rich-text .section-header {
margin-bottom: 6px;
  }
}

 

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
Queenofgifts
Excursionist
15 0 4

Thank you very much @Nick_Marketing  - worked!

Have a good day.

Regards,

Asta 

Nick_Marketing
Shopify Partner
1487 336 462

@Queenofgifts  Great to hear that the issue has been resolved!

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).