Prestige Theme - Change Size of Logo in Header?

[woodwardandfox]

Hi,

Kind of new to coding on Shopify but have successfully cut and pasted several changes with other issues.

I would like to increase the logo width size on both Mobile and Desktop.

I am using Prestige theme and the maximum size of the PNG they allow is 200 x 60px.

Can someone help and tell me how what exactly i need to change in the code to do this?

my url is

woodwardandfox.com

password is rankin

Thank you

[KetanKumar]

@woodwardandfox

Sorry for facing this issue, it’s my pleasure to help us.

i have checked but sorry i can’t see the logo current text base logo can you please show me

[woodwardandfox]

Hello. So sorry. I was playing around with it yesterday and forgot to put it back. No one ever answers my posts so didn’t expect a reply

Thank you for looking.

[KetanKumar]

@woodwardandfox

no rush

so do you need help?

[woodwardandfox]

Yes please!

[KetanKumar]

@woodwardandfox

Thanks for it

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 640px) {
.Header__LogoImage {
    max-width: 150px !important;
}
}

[woodwardandfox]

hi @KetanKumar

Okay So I duplicated my theme and added the code you suggested.

It doesnt seem to change the desktop version, but I think it changed the mobile size. But i am struggling to tell. Dont really know what I am looking for if that makes sense.

Here is a screenshot of the new mobile version with your code.

The desktop has stayed the same size as the live website now.

[MS-WEB-DESIGNER]

Dear @woodwardandfox

Hope it will help

• From your Shopify admin, go to Online Store > themes.
• Locate your current theme and then click Actions > Edit code.
• After that in the Assets folder, click to open your theme.scss.liquid file.
• Go to the very bottom of this file and paste the following code:

/* Start */
@media screen and (min-width: 641px) {
 	.Header__LogoImage { max-width: 75%; }
}
@media screen and (max-width: 640px) {
.Header__LogoImage { max-width: 135px; }
}
/* End*/

• Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
• Save and check your theme by refreshing it.

If you still need help you can contact us by using the link or email given at signature.

[KetanKumar]

.Header__LogoImage {
    max-width: 160px !important;
}

@woodwardandfox

Thanks

[woodwardandfox]

hi, @MS-WEB-DESIGNER

thanks for this. I have tried but it didnt change anything… on mobile or desktop.

[woodwardandfox]

@KetanKumar @MS-WEB-DESIGNER

this is what i what i am looking for.

I made this on photoshop.

praying someone knows how to do this…

[KetanKumar]

@woodwardandfox

yes, can you please upload same as logo file so i will guide CSS code if any required

[woodwardandfox]

@KetanKumar

Hi, so ive created and uploaded a new version of logo with the recommended logo size of 200 x 60 pixels.

I wasnt sure what size to make the image but I uploaded it as a png.

Hoping you can somehow get it to work for me

thank you

[KetanKumar]

@woodwardandfox

Thanks but it’s too smaller

can you please upload the logo 600x40 remove top and bottom blank spacing

[woodwardandfox]

Hi @KetanKumar

I have uploaded a new logo with the size you requested - 600 x 40.

Hope this works. Thanks again!

[KetanKumar]

@woodwardandfox

thanks for it’s not update your logo

now it’s to smaller please check

or can you please add me to staff account so I will quick fix

[woodwardandfox]

hi

thanks for the offer.

How do I add you?

Also - would you be able to do it on a duplicate theme? as I am too scared in case something goes wrong. I will create a KatanKumar duplicate theme

[KetanKumar]

@woodwardandfox

yes i will fix first duplicate theme

https://help.shopify.com/en/manual/your-account/staff-accounts/create-staff-accounts

[woodwardandfox]

hi… what is your email?

[woodwardandfox]

isnt it easier to just do Collaborator Access as your a shopify partner?