Solved

How do i change the header size on mobile view - DEBUT Theme

healhana
Explorer
63 0 22

Hi there

The header is too big on mobile, I believe this is due to the logo not changing size - any ideas how to fix?

healhana_0-1614942897883.png

 

Thanks!

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@healhana 

Please add this code at the bottom of your assets/theme.scss.liquid file.

@media only screen and (max-width: 749px){
a.site-header__logo-image img { max-width: 50px !important; }
.main-content{ padding-top: 13px !important; }
}

 

Above I have given max-width 50px you can increase or decrease it as per your need.

Let me know if this works.

Thanks! 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 11 (11)

dmwwebartisan
Shopify Partner
12280 2546 3694

@healhana 

Yes, you are right. This is because of the logo otherwise your mobile header is fine. Please provide me URL.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
healhana
Explorer
63 0 22

Thanks!, url is healhana.com and the preview is on https://w0sdwyel2km4s2tn-47542796440.shopifypreview.com.

 

Please let me know if you need anything else?

dmwwebartisan
Shopify Partner
12280 2546 3694

@healhana 

If we make the logo small then the header will reduce.  Let me know your thoughts.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
healhana
Explorer
63 0 22

The problem is that if I make the logo smaller, then it will be too small for desktop. It would be great to change the size of the logo in the header only for the mobile view?

dmwwebartisan
Shopify Partner
12280 2546 3694

@healhana 

Yes, that I wanted to say. We can a little bit make it small in size for mobile only. Let me know. I will try to give you the code.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
healhana
Explorer
63 0 22

Yes please, that would be perfect!

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@healhana 

Please add this code at the bottom of your assets/theme.scss.liquid file.

@media only screen and (max-width: 749px){
a.site-header__logo-image img { max-width: 50px !important; }
.main-content{ padding-top: 13px !important; }
}

 

Above I have given max-width 50px you can increase or decrease it as per your need.

Let me know if this works.

Thanks! 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
healhana
Explorer
63 0 22

Amazing thank you so much for your help!

facufranco19
Visitor
1 0 0

hi i was able to reduce the header size but the problem is that the logo is extremely small and i cant get it bigger Screen Shot 2021-07-22 at 15.19.02.png

Dimitrios22
Tourist
4 0 2

Hello,

I do not seem to find a solution for my header/logo height on the mobile (debut theme as well). I have tried a lot of codes and none of them help. I just need some more space, so my logo fits.

Can anyone help me?

Thank you!

Thesaucycowgirl
Tourist
6 0 1

Hello when I use this code it does change my header but it completely changes the rest of my pictures & adding dots can you help me with Just the header sizing for the mobile. Thank you