Change logo size mobile/desktop view

Solved
Liz93
Excursionist
41 0 13

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)

Accepted Solutions
dmwwebartisan
Shopify Partner
9824 2236 3074

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 | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Natztech
Shopify Partner
2237 565 1373

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
24923 2498 9041

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

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
2567 309 641

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.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
dmwwebartisan
Shopify Partner
9824 2236 3074

@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 | Bag is a cart drawer that maximizes your sales. View app →
Liz93
Excursionist
41 0 13

Hi @dmwwebartisan @Zworthkey 

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

 

Zworthkey
Shopify Partner
2567 309 641

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.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
dmwwebartisan
Shopify Partner
9824 2236 3074

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 | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Liz93
Excursionist
41 0 13

@dmwwebartisan  Thank you so much for the info!

dmwwebartisan
Shopify Partner
9824 2236 3074

@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 | Bag is a cart drawer that maximizes your sales. View app →