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

Store Design
1

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!

2 Likes
2

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

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

4

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.

1 Like
5

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

6

Hi @dmwwebartisan @Zworthkey

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

7

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.

1 Like
8

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

05-32-1qtsr-nwnbj
05-32-1qtsr-nwnbj602×1094 31.6 KB

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,

9

@dmwwebartisan Thank you so much for the info!

1 Like
10

@Liz93

Thanks! welcome again.

11

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;
}
}
1 Like
12

@Kinjaldavra Thank you so much, it worked!