Shopify themes, liquid, logos, and UX
I searched the forum for similar questions but no solution worked for my site...
I want to increase the size of my logo JUST for the computer, how do I do it?
The URL: https://wsmateriais.com/
Solved! Go to the solution
This is an accepted solution.
Hi @WS_Materiais,
Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:
@media screen and (min-width: 641px) {
.header__logo-image {
max-width: 180px !important;
}
}
This is an accepted solution.
Hi @WS_Materiais,
Have you tried this? 😊
Hi @WS_Materiais ,
This is Amelia from PageFly - a Landing Page Builder App,
You can use CSS media queries to target larger screens. Here are the steps to achieve this:
Access Your Shopify Admin:
Locate the CSS File:
Add CSS for Desktop Logo Size:
/* Default logo size */ .header__heading-logo img { max-width: 100px; /* Adjust this value as needed */ } /* Increase logo size for desktop */ @media (min-width: 768px) { .header__heading-logo img { max-width: 200px; /* Adjust this value as needed */ } }
This code sets a default logo size and then increases it for screens wider than 768px (typically desktop screens).
Save Your Changes:
Preview Your Store:
I hope that my solution works for you.
Best regards,
Amelia | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
➜ Weekly updated Shopify tutorials on YouTube
All features are available from Free plan. Live Chat Support is available 24/7.
Didn't work...
This is an accepted solution.
Hi @WS_Materiais,
Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:
@media screen and (min-width: 641px) {
.header__logo-image {
max-width: 180px !important;
}
}
This is an accepted solution.
Hi @WS_Materiais,
Have you tried this? 😊
I put this code in the custom CSS that Tim recommended to me and it worked! Thanks.
Hi @WS_Materiais,
You're welcome and happy to help
On top of what others suggested my only recommendation is to not edit the theme code, but rather (or at least first try to) paste the code to "Custom CSS" setting of your Heading section.
Avoiding theme code edits simplifys future theme updates.
I tried editing through the custom CSS that appears when I click on the header while customizing Shopfy itself, but all the codes I tried to do on my own didn't work correctly...
The only thing I was able to edit in a better way was using "scale", but because of that I was unable to save the changes due to some error.
Can't test myself because your theme is neither free nor from Shopify theme store.
Yes, sometimes this may not work because, say a part of the header is not part of the header section 🙂 but this does not see to be the case this time.
You can also try "Custom CSS" under "Theme settings" -- these rules are not scoped to any particular section and apply to entire site.
And yes, very rarely you may be forced to actually edit theme code for your CSS.
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024