Remove blank space from header below logo on Mobile View

[echosadmn]

Hi there, 

I adjusted the logo size on mobile view and this blank space at the bottom of the header appeared. I was wondering how can I get rid of it. I'd appreciate any guidance. The store URL is https://betterbuttlift.com/ 

Thanks!

[BSSCommerce-HDL]

Hi @echosadmn,

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Inside tag head. You need create style tags. After you'll insert my code inside it

@media only screen and (max-width: 747px) {
    .header__heading-logo-wrapper .header__heading-logo {
        height: auto !important;
    }
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[echosadmn]

Thanks for the suggestion, it kinda helped but still the bottom of the header is covering the neck of the model. Ideally it should show like this as my desktop view of the store 

As you can see the top part is covered by the header in mobile view still. Please let me know if you can fix this. 

[BSSCommerce-HDL]

Hi @echosadmn, Pls insert this code to your file css: 

@media only screen and (max-width: 747px){
  .header__heading-logo-wrapper .header__heading-logo {
    scale: 1 !important;
  }
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

Hi @echosadmn  please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<style>
.header__heading-logo{
  height: auto !important;
}
</style>

The height of the logo has a space below, you can also cut it and re-upload it:

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[echosadmn]

Hi I'm trying to add the code that you said but I cannot find the tag </body> in theme.liquid. I tried cropping the GIF and reuploading yet the problem is still there. It shows on the desktop as well. i'd appreciate if you offer a solution for both mobile and desktop view. 

Thank

[PageFly-Noah]

Hi @echosadmn  Iam sorry for delay, Can you add again code in the end file base.css:

@media screen and (min-width: 768px) {
   .header__heading-logo {
    height: 150px !important;
  width: 250px !important;
}

}

@media screen and (max-width: 767px) {
   .header__heading-logo {
    height: 150px !important;
   }

}

Thank you so much.