Remove space above and below logo in mobile view

[kpscowley]

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.

[Katy]

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 

[wejus]

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!