Control spacing between sections (custom content, images, text et.c)

Highlighted
New Member
2 0 0

Hi,

I am looking to control the spacing between different sections on the website. Now from the info I got it should be edited in theme.scss.liquid but where exactly do I edit it in the file? Or do I need to add html somewhere?

0 Likes
Highlighted
Shopify Partner
60 0 4

One way to do it would be like this.  You could try adding that to the bottom of the file.  Currently, the theme has the padding between sections set to 55px.  Adjust it to whatever you like by modifying this code.

.shopify-section {
  padding-top: 75px;
}

 

Freelance Developer - darian@optiqal.com
Highlighted
New Member
2 0 0

This solved everything, big thanks!

0 Likes
Highlighted
New Member
2 0 4

I used this code and it worked fine when it came to the spacing, however I am now seeing a black bar either above or below certain sections (my main background is black). I have edited in my code for these specific sections to be a different color, this may be why the background is showing through that space. However, I would like to see if there is a way where I may use this code and not have those black spaces showing through. Like in the example here: https://www.screencast.com/t/7qo8uFlZ

Can anybody assist with this?

0 Likes
Highlighted
New Member
2 0 4

Figured this out, used almost the same code I only altered each specific section by #.

div#shopify-section-1562691864327 { (Do not include this, the number in black will change dependent upon the section you'd like to fix.)
padding-top: 0px;
padding-bottom: 0px;
}

 

I figured out the numbers of the sections by right clicking the home page and clicking inspect, then hovering over the different numbers to find the specific section. Hope this helps anybody with this issue! PS: Code is entered at the bottom of: Assests > theme.scss.liquid

Highlighted
New Member
1 0 0

Hi there,

 

I would like to reduce a specific space on my homepage between the blog post and the Instagram feed:

 

https://www.labl01.com

 

Many thanks for your help!

0 Likes
Highlighted
Tourist
4 0 0

Amazing, thanks so much @EZSPLITZ! This just helped me use a logo element for my USPs! So cool! 

0 Likes
Highlighted
Excursionist
25 2 3

This worked great for me - thank you! Just wanted to add if you're not on your homepage - it won't be a number, but rather the name of the section you can sub in for the #. It took me a bit to realize that when I couldn't find the number.

Thanks so much!!!

0 Likes
Highlighted
New Member
1 0 0

Where do you find the section number?

 

Thanks!

0 Likes
Highlighted
Tourist
4 0 0

Bildschirmfoto 2020-07-30 um 20.41.49.png

When you're on your website and inspect the page, you can hover over the elements you need the ids of. Then copy it from the code Usually the id is right next to class. Sometimes elements only have classes so any changes you make using class instead of id will apply to each element in this class across your website. Hope this helps

0 Likes