Remove space above and below logo in mobile view

kpscowley
New Member
1 0 0

Hello, 

I have seen others ask the same question, although there have been on answers. My logo is perfect in desktop view, and I have removed padding. But when I change to mobile view, there is a large amount of empty above and below my logo.

Could anyone help me remove this excess space?

Thank you,
Kevin.

0 Likes
Katy
Shopify Staff
Shopify Staff
769 42 163

Hi, Kevin!

Katy here from Shopify. I hope you are keeping well.

Sorry to hear that this has not been answered in some other posts, and thanks for reaching out again for help. Due to the volume of posts within our community, at times some can fall through the cracks. This is certainly not our intention and we are working to improve on this.

To help you out however, regarding the space on your mobile view. This can be adjusted by adding some code to the bottom of your CSS file. 

If you could log into your admin, and head to online store > themes > actions > edit code > assets > theme.scss

At the very bottom of this file, if you could paste the following:

@include at-query($max, $small) {
  .header-logo {
      margin-top: 30px;
      margin-bottom: 30px;
  }
}

Feel free to adjust the margins to your own preferences. 

I hope this helps- do feel free to let me know. 

Katy 

Please note: This account is no longer regularly monitored.
 - If you need assistance please do start a new topic (referencing an older topic/post if you find this helpful).
 - Thank you for your understanding. We hope you enjoy exploring the Community.
 - To learn more visit the Shopify Help Center or the Shopify Blog.

0 Likes
wejus
New Member
2 0 1

Hi, I am using the Supply theme and this does not seem to work. Pasting the code at the bottom of theme.scss.liquid does not appear to do anything. I can find .header-logo in the file, but adjusting the margins makes barely any difference. I still have a big chunk of whitespace between the logo and the first section of my homepage. Is there something else that needs to be done for the Supply theme?

 

Thanks!

Varendot
New Member
1 0 0

Same

0 Likes
UmairA
Shopify Partner
595 65 103

Hi,

Please include the link to your store so that I can provide code specific to your store. Thanks

cheers :))

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gmail.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes
TylerS
Tourist
6 0 1

Did anyone get the answer to this question?

0 Likes
Tessa0905
New Member
1 0 0

Hi there! Anyone here got the answer to how to reduce the white space below the header image?

Thanks,
Tessa

0 Likes
Milky_Way_Shop
Tourist
19 0 0

hi,

I hope you'd have solved it by now. So can you please share the tricks BOTH for desktop and mobile view please?

 

Cheers!

0 Likes
Milky_Way_Shop
Tourist
19 0 0

 have the same issue. The gaps above, below and sides to minimise. Please see the pic shared. 

This is the shop link:

https://www.milkywaytrading.co.uk/

 

Cheers!Shopify Community.JPG

0 Likes
offbeatcookie
New Member
5 0 0

I found the solution for desktop, but still looking for a solution for mobile view...

0 Likes