Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

Solved

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

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)
KetanKumar
Shopify Partner
37332 3654 12097

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 15 (15)

KetanKumar
Shopify Partner
37332 3654 12097

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
37332 3654 12097

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

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

KetanKumar
Shopify Partner
37332 3654 12097

@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
37332 3654 12097

@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
37332 3654 12097

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

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

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

 

GTBond
Explorer
59 2 27

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

BBL2
Excursionist
23 0 4

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
Shopify Partner
37332 3654 12097

@BBL2 

sorry for that issue can you please share us store url 

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
Festus12
Visitor
1 0 0

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.