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

[wbkellam]

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 ) 

[KetanKumar]

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

[wbkellam]

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

[wbkellam]

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

[KetanKumar]

@wbkellam 

Thanks for update and your support.

[GTBond]

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.

[KetanKumar]

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

[GTBond]

thanks for getting back to me Kumar

the site url is https://gadzone.co

[KetanKumar]

@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;
}

[GTBond]

thank you so much Kumar it worked. While I still have you, would you mind helping me change the colors of the titles in my footer? Just to make the titles for example 'Quick Links' and 'Newsletter'another color

[GTBond]

is there also a way to align the footer content to the left on mobile? It seems to be center-aligned

[GTBond]

Hey Kumar, unfortunately the cart and search box are not showing in desktop mode after adding the code. What could be the issue?

[BBL2]

Dear Kumar,

I have the same problem spaces between each sections of my homepage and Im using Venture Theme. Kindly looking forward for your expertise to solve this pls. I attached screen shots. The Spaces/Paddlings I wanted to get rid of are between each section of my home page.

Kind Regards

[KetanKumar]

@BBL2 

sorry for that issue can you please share us store url 

[Festus12]

Hello @KetanKumar i have tried to effect your guide on how to fix mobile view but i cant seem to get it right. Can you have a look at my website and help me out. Poshdoggy.co.uk. I have already tried using the code you suggested, but it didn't work (Note; I couldn't find theme.scss.liquid after Asset on my theme). Someone suggested we paste the code in (base.css), that it is the same with theme.scss.liquid. I did that but still did not change anything. I had to remove it.