How to change logo size on mobile?

[VithithiHandmad]

Hi,

The logo on the mobile version of my website is very small and I'd like to make it bigger.

I see that it is not possible through the customize page.

My website is https://www.vithithihandmade.com and I'm using the Brooklyn theme.

How can I do it?

Thanks, Max

[Helly · Accepted solution]

Hi Max,

First of all please remove white space around logo and then please add this css code at the end of theme.scss.luid file

@media screen and (max-width: 768px){
.site-header__logo img {
 max-height: 100px;
}
}

If you still want to increase logo size then increase max-height value in above code instead of 100px 

---

For any help you can Contact me on helly.parekh93@gmail.com

[VithithiHandmad]

Hello,

What white space around the logo?

Anyway, thanks, it works.

Mx

[Whiteadders]

I had the same issue.  The logo was the perfect size on the desktop, but tiny on mobile devices.  This code has resolved the issue.  

[karthiksv89]

What white space?

[Whiteadders]

I don’t know what the previous responder meant by ‘white space’ in this context, but the code definitely worked for me.

[MartyDunlop]

They likely meant that the actual graphic had white space around it in the source image, ie the bounding box for it was not flush with the graphic but had a 'margin'. With your logo, in whichever package you use, ensure that the actual graphic portion of your artboard is what is bound by the artboard, don't let there be pixels worth of actual white space around it or else it will show up and distort your coded sizing.

[Euphorictech]

I did this exact code on my website but it didn’t seem to change anything.

[Cyborg]

Same for me. This solution doesn't work

---

@Euphorictech wrote:
I did this exact code on my website but it didn’t seem to change anything.

---

[oscprofessional]

@Cyborg,

Please share your site url so that I will give you exact solution

[JPlegacy]

my logo on mobile looks so small. Please help. my website is: minimasseur.com

---

@oscprofessional wrote:

@Cyborg,

Please share your site url so that I will give you exact solution

---

[TobiD7]

hey, oscprofessional 

My website URl is https://magicmakeuppad.myshopify.com/ I would appreciate a lot if you help me fix my problem

Thanks,

Tobi 

[oscprofessional]

Hello @TobiD7,

Below css is creating issue.
Please remove that css which is highlighted by red mark

also please Remove top and bottom space from your logo

[mountainhollow]

I’m having same problem with logo size on mobile for my site. Can you assist?
www.mountainhollowcrystals.com

Thanks!

[Aras2016]

Hello @oscprofessional 

I have same problem. Can you help me please?

My web site : https://turkishgiftbuy.myshopify.com/

[fitnessboozt]

Hi i'm having the same problem and code dosent seem to work for me, any chance you could assist me please. My site - www.fitnessboozt.com 

[oscprofessional]

Hello @fitnessboozt 

Your site is password protected then please share your password for your reference site url.

So that I can check and let you know the exact solution for this.

Thanks...

[fitnessboozt]

Sorry password is now removed.

[oscprofessional]

Hello @fitnessboozt 

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

 @media screen and (max-width: 768px) {
 .site-header__logo .site-header__logo-link img {
		max-height: 250px;
	}
 }

Hope this will work for you

Thanks....

[oscprofessional]

Hello @Aras2016 

Your site is password protected then please share your password for your reference site url.

So that I can check and let you know the exact solution for this.

Thanks...