Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Shopify Community Downtime: The Shopify Community will be down December 5th for approximately 15 minutes between 3pm and 4pm EST. Thank you for your understanding.

Re: Store logo

Solved

How can I adjust my store logo size for mobile and desktop separately?

Mavidals
Excursionist
12 1 1

Hey, my logo is too small on desktop and mobile found a way to change the size to make them larger using this code:

.site-header__logo img {
  max-width: 250px!important;
  width: 250px!important;
}

 I want 250px for desktop and 195px for mobile but it does both of them at 250px and its way too big for mobile

I would really appreciate if anyone could help me

 

mavidals.com

Accepted Solution (1)
Mavidals
Excursionist
12 1 1

This is an accepted solution.

Found a solution on https://community.shopify.com/c/Shopify-Design/Logo-Size-on-Debutify-Theme/td-p/623793 used the first codes and the code you gave me, had to add important to yours because the code for mobile override it, didn't think that would actually work, thanks for all your help

 

 

@media screen and (min-width: 590px) {
.sticky-header.is-scrolling .site-header__logo .default-logo {    width: 250px !important;
    }
}


img.inverted-logo.imgset.radius-none.ls-is-cached.lazyloaded {
    width: 250px !important;
}

.site-header__logo img {
  max-width: 250px!important;
  width: 197px!important;
}

 

 

View solution in original post

Replies 10 (10)

oscprofessional
Shopify Partner
16116 2410 3126
img.inverted-logo.imgset.radius-none.ls-is-cached.lazyloaded {
    width: 250px;
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Mavidals
Excursionist
12 1 1

This worked but I wanted the header logo to change also

oscprofessional
Shopify Partner
16116 2410 3126

for mobile or desktop ?

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Mavidals
Excursionist
12 1 1

Desktop

Gold_Skill
Tourist
8 0 0

Hello 

You can easily make use of Canva.com for the designs 

And set up with Custom Size 

Mavidals
Excursionist
12 1 1

The max size for my theme is 200px for desktop and 150px for mobile.

oscprofessional
Shopify Partner
16116 2410 3126

Hello,

use canva tool and make your logo as per your need.

punch https://www.canva.com/

use custom design & according to your size!

hope this will work.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Mavidals
Excursionist
12 1 1

This is an accepted solution.

Found a solution on https://community.shopify.com/c/Shopify-Design/Logo-Size-on-Debutify-Theme/td-p/623793 used the first codes and the code you gave me, had to add important to yours because the code for mobile override it, didn't think that would actually work, thanks for all your help

 

 

@media screen and (min-width: 590px) {
.sticky-header.is-scrolling .site-header__logo .default-logo {    width: 250px !important;
    }
}


img.inverted-logo.imgset.radius-none.ls-is-cached.lazyloaded {
    width: 250px !important;
}

.site-header__logo img {
  max-width: 250px!important;
  width: 197px!important;
}

 

 

Mavidals
Excursionist
12 1 1

Do you think I should make any adjustments to the code?

oscprofessional
Shopify Partner
16116 2410 3126

@Mavidals ,

Your issue is solved or not ?

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free