How can I reduce padding (blank space) in "Supply" theme?

Solved
TheHatGirls
Excursionist
21 0 5

My website, thehatgirls.com, uses Supply theme. On all of my pages (both collections and regular pages) there is so much padding and blank space...is there a way for me to go into the code and edit this to be reduced? I'm not coder but think I can probably figure it out with some guidance. See photo provided, i want the selected red areas reduced for less dead space.Screen Shot 2021-03-01 at 7.50.26 PM.png

0 Likes
dmwwebartisan
Shopify Partner
5327 1229 1574

@TheHatGirls 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
TheHatGirls
Excursionist
21 0 5

Hi, it's www.thehatgirls.com

 

There's no password that I'm aware of, unless you mean my Shopify login password...

 

Thanks

dmwwebartisan
Shopify Partner
5327 1229 1574

@TheHatGirls 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.section-header--title {
    margin-bottom: -32px !important;
}
#CollectionSection hr { display: none; }

 

Hope this works.

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
TheHatGirls
Excursionist
21 0 5

Hi, not to sound ignorant, but am I just copy and pasting the provided code as-is? Do i need to remove any spaces or characters? And should I back-up my liquid file before doing so? Thank you!!

0 Likes
dmwwebartisan
Shopify Partner
5327 1229 1574

@TheHatGirls 

If you want to take code backup then it will be the best. Just copy and paste the above code at the bottom of your CSS file and check if it works.

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
TheHatGirls
Excursionist
21 0 5
It did not work. I didn’t see any aesthetic changes
0 Likes
dmwwebartisan
Shopify Partner
5327 1229 1574

@TheHatGirls 

Please add the following code at the bottom of your assets/theme.scss.liquid file

.section-header{ margin-bottom: 0px !important;}
#CollectionSection .grid-item hr {display: none !important;}
#shopify-section-collection-template .breadcrumb {margin-bottom: 0px !important;}
#CollectionSection .grid-item {padding-top: 0px !important;}


Hope this works.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
TheHatGirls
Excursionist
21 0 5

Oh yay, it worked!! It looks significantly better, much less blank space. Thank you so much!!

Let me ask one more question, I may not have been clear in my original post. Is there a way to minimize the white space that I have highlighted in red, between our logo and the main navigation menu? I would like that red space to be cut in half (I'm not sure how to put that into measurements...)

Thank you so much again, this has been driving me crazy for years!

 

Screen Shot 2021-03-03 at 10.05.18 AM.png

0 Likes
dmwwebartisan
Shopify Partner
5327 1229 1574

This is an accepted solution.

@TheHatGirls 

Please add the following code at the bottom of your assets/theme.scss.liquid file

 

@media screen and (min-width: 769px){
.site-header {padding-bottom: 0px !important;}
}

 

Hope this works.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes