How can I adjust my debut theme logo size for 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,

View solution in original post

Kinjaldavra
Shopify Partner
2302 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
37094 3645 12053

@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 [email protected] 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 1577

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!

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,

Liz93
Excursionist
41 0 12

@dmwwebartisan  Thank you so much for the info!

dmwwebartisan
Shopify Partner
12321 2552 3729
Kinjaldavra
Shopify Partner
2302 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 1577

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.