How to change logo size on mobile?

New Member
5 0 0

Hi guys,

My logo on my website home page looks fine on desktop, but I feel it's too small on mobile.

Is there a way for me to change the size of my logo on my home page on mobile only?

Many thanks,

Shaan

0 Likes
Shopify Staff
Shopify Staff
444 18 61

Hi, Shaan!

Elle here from Shopify. 

If you add the following code to the bottom of your stylesheet (Online store > Actions > Edit code > Assets > theme.scss.liquid)  this will help:

.site-header__logo img {
  @include at-query($max, $small) {
    max-height: 150px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
.site-header {
  @include at-query($max, $small) {
    padding: 0;
    margin-top: -50px;
  }
}

Let me know how it goes! :)

Elle | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

3 Likes
New Member
5 0 0

Worked like a charm. Thank you, Elle!

Will the size be consistently the same on mobile no matter what the size of the logo is on desktop?

0 Likes
New Member
1 0 1

I've tried adding the above forementioned code into theme.scss.liquid at the bottom and also in the /*== MODULES SITE HEADER ==*/ section on theme.scss.liquid in the Venture Theme code and it broke the page.  I want to make the logo larger when in mobile size.

https://peoplesbank.myshopify.com/

 

1 Like
New Member
1 0 0

I have tried adding the code as well but the logo on mobile still is small. How do i change the the value for max height on this code.

@media screen and (max-width: 1024px)

.header-logo img {

max-height: 40px;

 

I found this via inspect. via google chrome, i cant seem, to find this code on my theme code templates.

 

Here is my store URL

https://stokedadventurer.com/

0 Likes
New Member
1 0 0

Hey! 

 

I also added this to the bottom of the style sheet as recommended and my store is now coming up with an error... how do i fix it? I want to make the mobile logo bigger in the header too, it is good on desktop as it is. 

0 Likes
New Member
1 0 0
What number is this at ill spend hrs looking for where this is at...
0 Likes
Tourist
3 0 1

What theme are you using?  Beautiful site

0 Likes
Tourist
14 0 0

Hi, I have the same problem, tried this code and a few others I found here on this community but didn't work, any help would be much appreciated. Thank you, Konstantinos

 

0 Likes
New Member
2 0 0

This doesn't seem to work for me. I believe it may be related to the theme I'm using, 'Jumpstart' because I was able to do it successfully on the Narrative theme. Is there anything else I can try to increase the logo size on mobile using the Jumpstart theme? 

 

As you can see in the attached screenshot, the header actually gets hidden using the code Elle posted. 

 

44380.jpg

0 Likes