How to change logo size on mobile?

Solved
VithithiHandmad
Tourist
11 0 2

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

0 Likes
Helly
Tourist
8 4 3

This is an 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-height100px;
} }

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
Tourist
11 0 2
Hello,

What white space around the logo?

Anyway, thanks, it works.

Mx
Whiteadders
Tourist
6 0 1

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.  

0 Likes
karthiksv89
New Member
1 0 0

What white space?

0 Likes
Whiteadders
Tourist
6 0 1
I don’t know what the previous responder meant by ‘white space’ in this context, but the code definitely worked for me.
MartyDunlop
New Member
2 0 0

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.

0 Likes
Euphorictech
Tourist
4 0 1
I did this exact code on my website but it didn’t seem to change anything.
Cyborg
Tourist
6 0 1

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.

 

0 Likes

@Cyborg,

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

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87