Re: Change logo size mobile/desktop view

Solved

How can I adjust my debut theme logo size for desktop view?

Liz93
Excursionist
41 0 12

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!

Accepted Solutions (2)
dmwwebartisan
Shopify Partner
12321 2552 3729

This is an 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 image2048 x 512 pxPNG or JPGLess than 20 MB
Logo image512 x 512 pxPNG or JPGLess than 20 MB
Product image
  • Ideal size: 2048 x 2048 px
  • Maximum size: 4472 x 4472 px
PNG or JPGLess 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:

 

05-32-1qtsr-nwnbj

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,

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Kinjaldavra
Shopify Partner
2303 570 1426

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

 

View solution in original post

Replies 11 (11)

KetanKumar
Shopify Partner
37144 3648 12062

@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%;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Liz93
Excursionist
41 0 12

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
Shopify Partner
5581 642 1581

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
Shopify Partner
12321 2552 3729

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Liz93
Excursionist
41 0 12

Hi @dmwwebartisan @Zworthkey 

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

 

dmwwebartisan
Shopify Partner
12321 2552 3729

This is an 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 image2048 x 512 pxPNG or JPGLess than 20 MB
Logo image512 x 512 pxPNG or JPGLess than 20 MB
Product image
  • Ideal size: 2048 x 2048 px
  • Maximum size: 4472 x 4472 px
PNG or JPGLess 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:

 

05-32-1qtsr-nwnbj

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,

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Liz93
Excursionist
41 0 12

@dmwwebartisan  Thank you so much for the info!

dmwwebartisan
Shopify Partner
12321 2552 3729

@Liz93 

Thanks! welcome again.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Kinjaldavra
Shopify Partner
2303 570 1426

This is an 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
Excursionist
41 0 12

@Kinjaldavra Thank you so much, it worked!

Zworthkey
Shopify Partner
5581 642 1581

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.