How to fix the blurry product images?

[empiricalarby]

My product images, the ones contained in the carousel on the product pages, seem to be at least a little blurry on all my platforms. How do I make it more crisp? Also on mobile, how do I set the horizontal border for the images to zero?

https://empiricalwater.com/collections/all

Dawn theme

[Small_Task_Help]

Hi,

Hope this will help

Use High-Resolution Images
Check Image Compression
Adjust image size settings
Use CSS media queries
Update your theme's CSS file accordingly

[BSS-TekLabs]

Hi @empiricalarby,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

@media screen and (max-width: 749px) {
  .slider.slider--mobile.product__media-list {
    gap: 0;
  }

  .slider.slider--mobile.product__media-list li.product__media-item {
    width: 100%;
  }
}

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[empiricalarby]

Thanks, I appreciate the effort however I didn't notice any change on my end. The code is currently applied to the end of base.css.

[BSS-TekLabs]

Hi @empiricalarby,

I've checked your store and there's a special character above the code. Please review and remove it.

To this

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[empiricalarby]

Are you referring to that red dot?

[BSS-TekLabs]

Or you can follow this instruction:

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the theme.liquid file.

3, Paste the code snippet provided below right before the closing head tag, then save your changes.

<style>
@media screen and (max-width: 749px) {
  .slider.slider--mobile.product__media-list {
    gap: 0;
  }

  .slider.slider--mobile.product__media-list li.product__media-item {
    width: 100%;
  }
}
</style>

[empiricalarby]

It seems this made the image correct size but it is offset to the right, so I see white border at left on mobile.