Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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;
}
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
This worked but I wanted the header logo to change also
for mobile or desktop ?
Desktop
Hello
You can easily make use of Canva.com for the designs
And set up with Custom Size
The max size for my theme is 200px for desktop and 150px for mobile.
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.
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;
}
Do you think I should make any adjustments to the code?
Your issue is solved or not ?
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024