[Supply theme] Removing unnecessary white space

New Member
6 0 0

Hello to all the expert, 

I am looking for help to remove some of the unncessary white space on my website for it would look more professional. 

Appreciate if any of you could help!!

1) The header message

 

2) Between the search and the navigation menu 

3) After the custom layout section

 

The full address of my website is www.rakasstore.com

Appreciate if any of the expert can shed some light here. Thanks so much. 

0 Likes
Shopify Staff
Shopify Staff
555 4 87

Hi Royle!

Liam here from Shopify - thank you for your question :)

Great to see you are looking to optimise your home page to look exactly how you would like, so let's take a look at how the white spaces could be hidden. Some of the space can be easily removed by adding some CSS to your theme's stylesheet. 

You can find the stylesheet within the Edit HTML section in the Assets folder and you're looking for a file called theme.scss.liquid and you will be adding your changes to the very bottom of this file. It's very important not to change any code in the middle of the file as the SCSS file cannot be rolled back, so if there's a problem with new code it is easy to find it at the bottom. You could add this code to the bottom of your theme.scss.liquid file:

header.site-header {
  padding: 0;
}

div.custom-content {
  margin: 0;
}

div.custom__item.small--one-whole.three-quarters.align--top-middle {
  margin: 0;
}

 

Hope this helps Royle, if you have any other questions, just let me know!

Cheers,
Liam Griffin

Partner Education
support@shopify.com

0 Likes
New Member
6 0 0

Thanks Liam!!

They worked wonderfully!

One more thing, do you know how to reduce the height of the menu button ?

Regrards,

Royle Lim

0 Likes
Shopify Staff
Shopify Staff
555 4 87

Hi again Royle.

Thank you for getting back in touch. Liam here again. 

Just to confirm, you would like to pull down your navigation menu here:

Cheers,

Liam Griffin

0 Likes
New Member
6 0 0

Yes Liam. 

I realized that the remaning white space was due to the menu button. Hence, I would like to reduce the menu button height to bring the menu closer to the slider. Is there any way to do that? 

Regards,

Royle Lim

0 Likes
New Member
6 0 0

Sorry Liam. 

It seems that there's a funny spacing (highlighted in blue below) between the header message and log in link. Is there any way to take it away ?

 

Appologize for so many questions. Thank you in advanced if you could help!

0 Likes
New Member
2 0 0

Hi Liam are you there? sorry to interrupt (Royle)! but I've been trying for days to remove the white padding from my home page and I can't seem to get it right, I've managed to remove almost all of it, but there is still some padding where the footer is. I would like my homepage to look like this http://madeinchola.com/, right now mine is looking like this (Icetees picture attached), I would like to have all my text on the picture, as if the picture was a background 

Ps: I'm using Free Brooklyn theme 

Thanks in advance & Happy holidays!

 

F

0 Likes
New Member
12 0 0

10/20/2019

I entered this code at the bottom of theme.scss.liquid as you suggested and it did nothing. Now what?

kathie-miller-wildlife-and-landscape-artist.myshopify.com I'm trying to remove the white space between the top image and the quote and between the quote and the category images.

 


Liam here from Shopify - thank you for your question :)

Great to see you are looking to optimise your home page to look exactly how you would like, so let's take a look at how the white spaces could be hidden. Some of the space can be easily removed by adding some CSS to your theme's stylesheet. 

You can find the stylesheet within the Edit HTML section in the Assets folder and you're looking for a file called theme.scss.liquid and you will be adding your changes to the very bottom of this file. It's very important not to change any code in the middle of the file as the SCSS file cannot be rolled back, so if there's a problem with new code it is easy to find it at the bottom. You could add this code to the bottom of your theme.scss.liquid file:

header.site-header {
  padding: 0;
}

div.custom-content {
  margin: 0;
}

div.custom__item.small--one-whole.three-quarters.align--top-middle {
  margin: 0;
}

 

Hope this helps Royle, if you have any other questions, just let me know!

Cheers,
Liam Griffin

Partner Education
support@shopify.com


 

0 Likes