Why are my product images blurry on desktop but clear on mobile?

Store Design
1

Having this issue where the product images I’m uploading are clear for mobile and clear on the back end product editor page. But when I load the site its super blurry until you click on it and go to the product page. Website for example: www.saigabikes.com I tried resizing in the product editor to make sure it was sized correctly but it made no difference (even using an outside resizer didn’t help). I’m not great with code so if there’s a coding fix, please walk me through it XD.

1 Like
2

@AustinMertz

.card__inner {
    width: 50% !important;
}
  1. Navigate to Online Store->Theme->Edit code
  2. Asset->/component-card.css ->paste below code at the bottom of the file.
  3. Save it.
2 Likes
3

Worked perfectly thank you!

1 Like
4

Hello @AustinMertz

Greetings!!

The image’s size is very small on the collection page it is Shopify theme code behavior that converts the original image to a different image size a page-wise
So you have to change the setting from here, set column 2 or 3 instead of one https://nimb.ws/FOwJey like this

I hope you understand and it will help you!!

5

@AustinMertz
Let me know if you want any more help.

6

The images are super small on desktop and mobile right now, have messed around with those settings and the image sizes remained the same.

7

If you look at the site now I basically fixed the size issue, yet now the images are too close together.

8

In all honesty, I can’t believe Shopify released this theme with this issue. I have updated to the newest version tried all of the fixes here and still no change