Change Spacing on Home Page With Debut Theme

New Member
6 0 0

Our main page at      realsteelsignco.com

Consists of:

Header

Gallery (With a Single Image)

Collections

Footer

There is a huge amount of white space between the bottom of the Gallery Image and the Title of the Collections "Sign Options"

Where do we edit the code to get rid of most of this wasted space?

0 Likes
Shopify Staff
Shopify Staff
335 31 76

Hi, there!

This is May from Shopify.

It looks like you can make this adjustment by editing your theme code. While I am not an expert in coding myself, I am able to figure out how to change the spacing on your home page.

    1. For starters, from your admin, click on ‘Online Store > Actions > Edit’.

    2. Find a folder called ‘Assets’ and select ‘theme.scss.liquid’.

    3. You will then want to search for ‘.index-section {‘ by pressing the keys Command + F on a Mac or Control + F on a Windows.

   4. Under ‘.index-section’, locate the green box like the image above. To change the spacing, you will need to edit ‘padding-bottom’. You can either divide the existing padding by a certain number, for example:

padding-bottom: $section-spacing / 2;

This will divide the spacing by 2, or you can replace ‘$section-spacing’ with a number, for example:

padding-bottom: 20px;

    5. Click ‘Save’.

It is important to note that once you make changes to ‘theme.scss.liquid’, you cannot revert back to older versions. Therefore, we strongly recommend duplicating your theme before making changes to your code, to ensure that your customers aren’t affected if you see any unintended results! If you are not comfortable with making this change, I highly suggest reaching out to our Shopify Experts. Alternatively, since you are using a theme made by Shopify, our theme support may be able to look into making the change as well if your account is eligible!

Let me know if this helps. Feel free to reply back to this thread or contact our 24/7 support, and we’ll happily help!

Kind Regards,

May

Shopify Support

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

1 Like
New Member
6 0 0

Thanks!  Easy change to make, just couldn't figure our the right place to make it.

0 Likes
New Member
4 0 0

Hi May, thank you for the info provided.

This method does indeed work when the consecutive sections are of a different type, for example 'Slideshow' followed by 'Image with text'.

However, when the two consecutive sections are of the same type, namely 'Image with text' followed again by another 'Image with text', the margin does not shrink, even after changing the 'padding-top' and 'padding-bottom' values.

Could you kindly advise on how to shrink the padding between two consecutive 'Image with text' sections in this case?

Thank you so much!

0 Likes