How to adjust space between footer and collections on home page? (Minimal theme)

Solved
Tourist
3 0 1

Trying to reduce the white space as shown in the image attached. It only applies to the home page as I'm happy with the amount of white space above the footer for most other pages, such as when browsing products. It's only on the home page that the distance between the top of the footer and the bottom of the collection thumbnail images is too big.

 

Also I'd like to adjust it in a way that it is consistent wherever viewed, such as on mobile as well.

 

space-adjust-footer-shopify2.jpg

0 Likes

Success.

Shopify Staff
Shopify Staff
704 65 138

Hey there, @etricarter 

 

Bo here from Shopify Support! 

 

That is a really great question and can be achieved with some coding. This tutorial is specific to an unedited version of the Minimal theme, Version 10.0.2. We cannot guarantee results for themes that have been modified with custom coding and/or apps. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial, or wish to make any variations to this tutorial.

 

NB: When editing the CSS of your theme it is always a good idea to duplicate your theme first and making the changes on the duplicate. This will prevent any errors from occurring on your live site. We also recommend adding CSS to the bottom of the file as opposed to altering the preexisting code. The new code will overwrite the previous code.

 

  • Go to Online Store > Actions > Edit Code.
  • Open the Assets folder and then the theme.scss.liquid and scroll to the bottom of this file.
  • Paste the following code to the bottom of this file and click Save:
.main-content {
    padding-bottom: 0 !important;
}

Once this has been added to your theme code the space between the collection list and the footer will be reduced and you will be good to go. Are you making this theme edit in preparation for your store launching or have you already launched and are just doing a redesign? Do you have a marketing plan in place for this launch/redesign? If you have any other questions at all please do let me know, I am more than happy to help! 

 

All the Best,

Bo

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

0 Likes
Tourist
3 0 1

Hi Bo, thank you this worked great at reducing the space.

 

While it's already looking a lot better, just curious whether it's possible to reduce this space even more if I wanted to? As the padding is set to "0" like in the code you gave me, I thought entering "-5" would make the space smaller, but it didn't, it just went back to the default as if I hadn't entered the extra code at all.

 

*Also just wanted to add, I have another question about tweaking the distance between the item description and the "BUY NOW" button on the product page, let me know whether I can ask that here or should start a new query.

 

Thanks!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
704 65 138

Hey there, @etricarter 

 

I am really glad to hear that this worked for you. Negative values do not work in CSS in this way, but I like that you were thinking outside the box! I checked in with our design team to see about this and they let me know that further reduction of this space would actually hinder your page's performance. Based on Human Factor International's research, white space helps increase the comprehension factor by nearly 20%. Added white space gives emphasis to your call to action buttons and key information. White space lets your visitors breathe and appreciate the website better since things are laid out well and easy to spot. A great article for reference to this research is http://www.seguetech.com/whitespace-web-design.

 

All the Best,

Bo

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

0 Likes
Tourist
3 0 1

Thanks for the info! Will leave as is.

1 Like