Re: Mobile header size

Solved

How can I reduce the size of my mobile header?

Gypsymoon
Explorer
89 0 14

IMG_0952.jpeg

Hi!

im wondering if it’s possible to reduce the size of the mobile header? I have lots of black space around my logo and would like the header to be a bit smaller 🙂
Preview link of my store is https://0q4y9pn25qi3so13-8439839.shopifypreview.com

Accepted Solution (1)

ZenoPageBuilder
Shopify Partner
1052 203 220

This is an accepted solution.

Hello @Gypsymoon 👋

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.header--mobile-center {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

The result

Screenshot 2023-10-12 at 10.03.22.png

Hope that helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com

View solution in original post

Replies 5 (5)

PageFly-Oliver
Shopify Partner
878 190 175

Hi @Gypsymoon ,

 

You can try this code by following these steps: 

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

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

<style>
@media(max-width:767px){
body{
min-width:unset !important;
overflow-x:hidden
}

}
</style>



Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

ZenoPageBuilder
Shopify Partner
1052 203 220

This is an accepted solution.

Hello @Gypsymoon 👋

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.header--mobile-center {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

The result

Screenshot 2023-10-12 at 10.03.22.png

Hope that helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
Gypsymoon
Explorer
89 0 14

Thank you so much!!

ZenoPageBuilder
Shopify Partner
1052 203 220

You are welcome!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com

Dan-From-Ryviu
Shopify Partner
8391 1651 1665

Hi @Gypsymoon 

You can add this code to your theme.liquid file before </head> tag to do that 

 

<style>
@media screen and (max-width: 767px) {
.header__heading-logo { heigh: 50px !important; }
}
</style>

Screenshot 2023-10-12 at 11.10.21.png

 

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.