reduce space between sections (debut theme) & mobile view alternate view

Solved
Highlighted
Excursionist
15 0 6

Hello all, I hope you are all having a wonderful week.

I am nearly finished setting up my newest Shopify store and am having trouble customizing/adjusting my home page (and others). I am trying to reduce the amount of spacing/padding between the various sections.  Please lmk if there is coding to customize this easily. Furthermore, can I adjust padding/spacing between particular sections, or will the customizing code just generally reduce space between all sections?

Additionally, I would love to have two different viewable versions of the "who we are, what we do" section towards the bottom of the page- 1 version for computer, one version for mobile (or any smaller screen really) Since when i put in the image/text table it gets tottaly squished and missaligned when not on a full wide screen/desktop view.

Thank you for your help in advance! 

Kelly

Popspaceboutique.com

(to see the actual site, put in password: makemyspacepop ) 

1 Like
Highlighted
Shopify Partner
7687 1058 2675

Hello, @wbkellam 

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

.index-section {
    padding-top: 30px;
    padding-bottom: 30px;
}

 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
15 0 6

Thank you!  I just did this and notice it only really is adjusting the padding between the top image header section and the first section that is a newsletter sign up-  is there a way to trim down the area between the other sections as well? (IE bottom of a collection section and the View All button, and then also the area between that view all button and then the next section after it?)

Essentially i want to trim the padding in the index section, the newsletter section, the collection section, the featured collection section

Thank you for your help!

1 Like
Highlighted
Shopify Partner
7687 1058 2675

This is an accepted solution.

@wbkellam 

Thanks 

please this code also

.index-section .hr--invisible {
    margin: 26px 0px;
}

 do you have again an issue just give me further screenshot 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
15 0 6

This is magic! thank you! works exactly as I was looking for! 

1 Like
Highlighted
Shopify Partner
7687 1058 2675

@wbkellam 

Thanks for update and your 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 Expert | 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