A user is experiencing image quality issues with their Shopify store’s header logo on mobile devices. The logo appears blurry due to compression, while other header icons remain sharp.
Current Setup:
Proposed Solutions:
Check theme settings: Verify the logo size value in Online store > Themes > Customize > Theme settings > Logo
CSS modification: Add custom CSS to the base.css file targeting mobile viewports (320px-767px) to control icon and header element dimensions, specifically adjusting cart icon and header menu icon widths to 24px and 28px respectively
User’s Goal:
Maintain the 90px display size on mobile while preserving the original image resolution, or convert the logo to a vector format to prevent quality loss during scaling.
The discussion includes code snippets and screenshots demonstrating the CSS solution, though the issue remains open regarding whether this fully addresses the logo compression problem.
When I look at the site on mobile, it seems that it compresses the image of the logo in the header and it makes it look very blurry in comparison to the other icons in the header, how do I change it so the image does not get compressed and is it’s full resolution. (the logo)?
Website abellire.shop
Password abellire2023
90px, I want the actual size of the image to be that size on mobile, but I want to keep it the original resolution or at least make it a vector so it does not compress as it scales
Hi, @merchabellire .
Follow These steps,
Go to the online store theme and go to base.css file paste the code mentiond below.
@media (min-width: 320px) and (max-width: 767px) {
#cart-icon-bubble svg {
width: 24px;
height: 24px;
}
.header__icon--menu {
width: 28px;
}
}
Result:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
