Image Banner Stretches and Looks Blurry on Large Monitor - Dawn Theme

Store Design
2

  1. Yes, you can add larger screen sizes to the code of your Shopify theme in order to avoid the blurring of images on large screens. You can do this by editing the CSS of your theme to add media queries that target specific screen sizes and adjust the size of images accordingly.

    Here’s an example of how you could add a media query for screens larger than 1500px:

@media (min-width: 1500px) {
  .your-image-class {
    max-width: none !important;
  }
}

  • This will prevent the image from being resized on larger screens and will keep the image at its original size. You’ll need to replace .your-image-class with the actual class of your image element in the HTML.

    Additionally, you can also add high-resolution versions of your images by using the srcset attribute in the <img> tag. For example:
  • This way, the browser can choose the best image for the screen size, ensuring the highest quality display of your images on all devices.