Shopify themes, liquid, logos, and UX
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?
Thanks!
Solved! Go to the solution
This is an accepted solution.
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!
Yes, you are right. This is because of the logo otherwise your mobile header is fine. Please provide me URL.
Thanks!
Thanks!, url is healhana.com and the preview is on https://w0sdwyel2km4s2tn-47542796440.shopifypreview.com.
Please let me know if you need anything else?
If we make the logo small then the header will reduce. Let me know your thoughts.
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?
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!
Yes please, that would be perfect!
This is an accepted solution.
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!
Amazing thank you so much for your help!
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
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!
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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024