How to stop shopify from compressing header image?

merchabellire
Tourist
19 0 1

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

 

merchabellire_0-1703735071154.png

 

Replies 3 (3)

Dan-From-Ryviu
Shopify Partner
7011 1326 1352

Go Online store > Themes > Customize > Theme settings > Logo, check what value did you setScreenshot 2023-12-28 at 11.10.41.png

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

merchabellire
Tourist
19 0 1

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

websensepro
Shopify Partner
873 117 126

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:

websensepro_0-1703858554758.png

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here