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

Accepted Solution (1)

Accepted Solutions
Helly
Tourist
8 4 5

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

View solution in original post

Replies 45 (45)
Helly
Tourist
8 4 5

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.  

karthiksv89
New Member
1 0 0

What white space?

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 1

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
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.

 

oscprofessional
Shopify Partner
11573 1811 2316

@Cyborg,

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

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
JPlegacy
New Member
3 0 0

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
New Member
1 0 0

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
Shopify Partner
11573 1811 2316

Hello @TobiD7,

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

2020-02-18_13-29.jpg

also please Remove top and bottom space from your logo

2020-02-18_13-29(2).jpg

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
mountainhollow
Excursionist
13 0 5
I’m having same problem with logo size on mobile for my site. Can you assist?
www.mountainhollowcrystals.com

Thanks!
Aras2016
New Member
2 0 0

Hello @oscprofessional 

I have same problem. Can you help me please?

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

fitnessboozt
Excursionist
36 0 5

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
Shopify Partner
11573 1811 2316

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...

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
fitnessboozt
Excursionist
36 0 5

Sorry password is now removed.

oscprofessional
Shopify Partner
11573 1811 2316

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....

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
oscprofessional
Shopify Partner
11573 1811 2316

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...

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing