Change logo size mobile/desktop view

[Liz93]

Hello,

I have a debut theme and would like to change the size of my logo for desktop view only. It looks good on mobile, although not big enough on desktop.

https://yoursimpleliving.com/

test27

Thanks!

[dmwwebartisan · Accepted solution]

@Liz93 

The recommended logo size for all Shopify themes is 512 x 512 px. Check out the table below for further recommended specifications, and image best practices across our platform:

    Image type                          Dimensions       Format             Size

Header image	2048 x 512 px	PNG or JPG	Less than 20 MB
Logo image	512 x 512 px	PNG or JPG	Less than 20 MB
Product image	Ideal size: 2048 x 2048 px Maximum size: 4472 x 4472 px	PNG or JPG	Less than 20 MB

In the Debut theme you can even adjust your logo width from a minimum 50px to a maximum 250px after you upload it under Admin > Online Store > Theme > Customize Theme > Header as such:

You must even be interested in some photography best practices to learn more about the do's and don'ts of:

• Image composition
• Color and lighting
• Image quality
• Image styling
• + examples

If you have any other questions, don't hesitate to reach back out.

Warm regards,

[KetanKumar]

@Liz93 

can you please add this code

your mobile device too much smaller image please add below code also check theme customization header setting its allow to logo size

.template-index .site-header {width: 100%;}

[Liz93]

Hi @KetanKumar 

I want to keep it the size it is at the moment for mobile view, although I want it bigger for desktop view and on Shopify if I change the logo size, it changes both.

Where should I paste that code?

Thanks 

[Zworthkey]

hii, @Liz93 
Paste this code on top of the theme.scss file.

@media only screen and (min-width: 992px) {
h1.h2.site-header__logo {
    min-width: 175px !important;
}
}

Thank You.

[dmwwebartisan]

@Liz93 

 Please add the following code at the bottom of your assets/theme.css file. 

@media only screen and (min-width: 750px){
.site-header {width: 100%;}
.site-header__logo-image {max-width: 235px;}
}

Thanks!

[Liz93]

Hi @dmwwebartisan @Zworthkey 

They don't seem to change the size for some reason?

[dmwwebartisan · Accepted solution]

@Liz93 

The recommended logo size for all Shopify themes is 512 x 512 px. Check out the table below for further recommended specifications, and image best practices across our platform:

    Image type                          Dimensions       Format             Size

Header image	2048 x 512 px	PNG or JPG	Less than 20 MB
Logo image	512 x 512 px	PNG or JPG	Less than 20 MB
Product image	Ideal size: 2048 x 2048 px Maximum size: 4472 x 4472 px	PNG or JPG	Less than 20 MB

In the Debut theme you can even adjust your logo width from a minimum 50px to a maximum 250px after you upload it under Admin > Online Store > Theme > Customize Theme > Header as such:

You must even be interested in some photography best practices to learn more about the do's and don'ts of:

• Image composition
• Color and lighting
• Image quality
• Image styling
• + examples

If you have any other questions, don't hesitate to reach back out.

Warm regards,

[Liz93]

@dmwwebartisan  Thank you so much for the info!

[dmwwebartisan]

@Liz93 

Thanks! welcome again.

[Kinjaldavra · Accepted solution]

hello @Liz93 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 750px){
.site-header {width: 100% !important;}
.site-header__logo-image  {max-width: 235px !important;}
.site-header__logo-image  >img {
        max-width: 240px !important;
}
}

[Liz93]

@Kinjaldavra Thank you so much, it worked!

[Zworthkey]

hii, @Liz93 
Paste this code on top of the theme.scss file.

@media only screen and (min-width: 992px) {
img.js.lazyautosizes.lazyloaded {
    min-width: 250px !important;
}
}

Thank You.