Remove blank space from header below logo on Mobile View

Store Design
,
1

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!

IMG_0761.jpg
IMG_0761.jpg1170×2532 84.8 KB

2

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

BSSCommerceHDL_0-1717642236299.png
BSSCommerceHDL_0-1717642236299.png1919×873 121 KB

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

Here is result:

BSSCommerceHDL_1-1717642267726.png
BSSCommerceHDL_1-1717642267726.png1125×908 57.4 KB

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 :heart_eyes:

3

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

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

PageFlyNoah_0-1717643028355.png
PageFlyNoah_0-1717643028355.png2598×1734 487 KB

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

4

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

echosadmn_0-1717643249471.png
echosadmn_0-1717643249471.png2746×1630 113 KB

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.

5

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:

BSSCommerceHDL_0-1717644008166.png
BSSCommerceHDL_0-1717644008166.png686×911 117 KB

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 :heart_eyes:

6

Hi I’m trying to add the code that you said but I cannot find the tag 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

7

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.