[Narrative Theme] How to make section spacing even for mobile and desktop?

Solved
ConditionCoach
Tourist
4 0 2

Hi,

I am trying to make the spacing between each section on my page even for both mobile and desktop. I have tried using pieces of code to fix this but can only manage to fix it on one or the other.

Specifically collection list spacing and slideshow spacing are the most obvious for bad spacing, but I would like to have them all equally spaced out.

 

Thanks in advance for any solutions provided!

C

Shopify URL: conditioncoaches.com

the-condition-coaches.myshopify.com

suyash1
Shopify Partner
3016 329 504

@ConditionCoach - what is the password?

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
ConditionCoach
Tourist
4 0 2

Hi apologies for that! It's "Condition504"

0 Likes
ConditionCoach
Tourist
4 0 2

Hi, any success?

0 Likes
KetanKumar
Shopify Partner
20651 2142 7820

This is an accepted solution.

@ConditionCoach 

Thanks for post 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.highlight {padding: 40px 0;} /* change values as you like */
.custom-content-wrapper--bottom-margin {
    padding-bottom: 20px; /* change values as you like */
}
.collection-list {padding: 40px 0;} /* change values as you like */

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ConditionCoach
Tourist
4 0 2

Thank you so much!

KetanKumar
Shopify Partner
20651 2142 7820

@ConditionCoach 

Thanks for your feedback and support.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Chris236
Tourist
6 0 2

Hi there,

I am facing the same problem. But when pasting your code snippet to the bottom of the page my page breaks. 

Can you please tell me how I can reduce the top/bottom spacing of the collection-list section?

I tried, but it did not work: 

div#shopify-section-1478026923193 {
padding-top: 0px; padding-bottom: 0px;
}

Thank you!

Best,

Chris

suyash1
Shopify Partner
3016 329 504

@Chris236 - can you please share your page link? I think you do not need the div before #

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
KetanKumar
Shopify Partner
20651 2142 7820

@Chris236 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes