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

Solved
wbkellam
Excursionist
18 0 7

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 ) 

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
24919 2497 9030

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 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

View solution in original post

Replies 14 (14)
KetanKumar
Shopify Partner
24919 2497 9030

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 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
wbkellam
Excursionist
18 0 7

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!

KetanKumar
Shopify Partner
24919 2497 9030

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 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

View solution in original post

wbkellam
Excursionist
18 0 7

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

KetanKumar
Shopify Partner
24919 2497 9030

@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 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
GTBond
Explorer
59 2 27

Hey Kumar, I'm using the supply theme and was able to remove the padding above my store logo but there's still a lot of padding between the logo and first section which is a slideshow.

Kindly assist, thanks.

Screenshot (4) (1).jpg

KetanKumar
Shopify Partner
24919 2497 9030

@GTBond 

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
GTBond
Explorer
59 2 27

thanks for getting back to me Kumar

the site url is https://gadzone.co

KetanKumar
Shopify Partner
24919 2497 9030

@GTBond 

Thanks for details 

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

.template-index .main-content {padding-top: 0;}
.template-index .grid-item.large--one-half.text-center.large--text-right {
    display: none;
}

 

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