Removing white space from below logo (Supply Theme) - for mobile viewing

Highlighted
New Member
4 0 0

Hi there,

I'm trying to remove the white space between the logo and the 'Shop For" section on my store.  I've tried following some tutorials on here, adding .css to theme.scss.liquid to reduce padding, but there's still this massive gap appearing, especially noticeable on mobile/cell phones.  I'm using the Supply Theme.

Screenshot showing mobile preview

 

If anyone could give me some up-to-date advice that'd be fantastic and very much appreciated.

 

Thanks in advance

Owner, Snoozy Tots. URL: snoozytots.com Email: info@snoozytots.com
0 Likes
Highlighted
Shopify Partner
15 0 6

Hi Snoozy,

Try adding:

.header-logo {margin-bottom:0px;}

You can also use negative values for margins.

Hope that helps!

0 Likes
Highlighted
Excursionist
10 0 6

Hello, I am having the same problem. I have tried with some of the advice that I have found in the forums, but nothing yet has worked. 
I was able to adjust the margins for the webpage view, but not for the mobile view. Any recommendation?

1 Like
Highlighted
Shopify Partner
4998 736 1612

Hello, @TioConejoStore 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Excursionist
10 0 6

Thanks for your quick response,

The URL is tioconejostore.com and the shopify address is tio-conejo-store.myshopify.com

 

 

0 Likes
Highlighted
Shopify Partner
4998 736 1612

@TioConejoStore 

sorry your store password protect.

if you have front end password is confidential so please to a personal message as you like.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Excursionist
10 0 6

Hello Kutan,

We are live now. I would appreciate your help on this matter. Thanks.

1 Like
Highlighted
Shopify Partner
4998 736 1612

@TioConejoStore 

Thanks for it

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 768px) {
.header-logo {
margin: 0px auto;
}
.grid-item.large--one-half.text-center.large--text-right {
    display: none;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
10 0 6

Hello,

This worked perfectly. Thank you very much.

 

1 Like
Highlighted
Shopify Partner
4998 736 1612

@TioConejoStore 

Thanks 

also your second solution as per PM Messsage
I do not know how to change the background color of my collection images.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.featured-box {
background: #fdd889;
}

change color value as you like.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like