FROM CACHE - de_header
Gelöst

Two different banners for mobile and desktop on dawn theme with fixed banner while scrolling

real_Maestro
Tourist
11 0 1

Hello!

I wanted to have different banners on desktop and mobile, so for that i found a thread, where it told me to open section-banner-image.css and pasted this code to the last line:

 

.banner__media:first-child {
width: 100%;
}
.banner__media:first-child {
width: 100%;
}
.banner__media+.banner__media {
display: none;
}
@media screen and (max-width: 749px) {
.banner__media:first-child {
display: none;
}
.banner__media+.banner__media {
width: 100%;
display: block !important;
}
}
@media screen and (max-width: 749px) {
.banner__content::before{
padding-bottom: 150% !important;
}
}

 

And it worked, but it has 2 problems:

 

1: the image quality (which is originally great and was displayed great before the code) gets bad and i dont know why. The second problem: i wanted to have the banners fixed while scrolling. But if i choose that from the drop down menu, the "two banners" solution wouldnt work anymore and the two banners are displayed side by side again.

 

So i decided to search for a code, which allowed fixed banners. I found out, that i should paste this into theme.liquid:


<style>
.banner .banner__media.media img {
position: fixed;
}
</style>

That worked too, but now the footer is transparent (which i dont want). All codes i tried to change the background of the footer didnt work.

 

So i need help on why the banner quality gets reduced when i paste the first code and how i can fix the second code so that the footer dont get transparent.

 

Thanks in advance,

 

kind regards

 

Attila

 

P.S.: This is the shop https://www.fiveprayers.de

1 AKZEPTIERTE LÖSUNG

Gabe
Shopify Staff
15895 2516 3758

Erfolg.

Hey @real_Maestro 

 

Oh thanks and glad to help! And never give up, you got this! 😉

 

giphy

 

I checked fiveprayers.de on my mobile and it looks great. And I can see one of our experts helped you here. However, there now seems to be an issue with picture quality on Desktop with your image banner and I highly recommend you keep the store password protected until all is perfect as you don't want your future clientele to stumbled into a 🚧!

 

So on my desktop screen on most browsers, the Hoodies are looking slightly blurry if you 👀 closer:

 

02-38-66vhb-fdp9j.png

 

So let's go through the code changes here one by one and see where the 🐞 is in the code:

 

The image quality degradation when applying your initial CSS code to make banners fixed could be due to several factors unrelated directly to the CSS fix itself. Shopify themes, including Dawn, dynamically serve scaled images based on the device and viewport to optimize loading times and performance. When you set the image position to fixed, it's possible that this interferes with how the theme calculates the image size or how it serves the appropriate image resolution.

 

The original code snippet you inserted:

 

<style>
.banner .banner__media.media img {
 position: fixed;
}
</style>

 

This code makes the banner image fixed, but it doesn't directly influence the image quality. The issue might stem from how the theme's JavaScript or Liquid code handles images after your CSS changes. It's important to ensure that the images are served using Shopify's srcset attributes, which allow the browser to select the most appropriate image size based on the screen resolution and size.

 

When you remove the Liquid code that assigns image widths and fetch priorities, i.e. remove Liquid variables that are used later in the code (like widths and fetch_priority), any reference to these variables will become invalid. This is why they are highlighted, indicating an error or a warning.

 

{%- liquid
...
assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
...
-%}

 

If you remove the block that defines widths and fetch_priority, then you also need to remove or adjust any part of the code that uses these variables. They are used to dynamically set the sizes and srcset attributes of image tags, which are crucial for responsive and efficient image loading. Removing these without a proper replacement could further impact your site's performance and the visual quality of images.

 

Ensure that the image serving mechanism (like srcset) is not disrupted by the CSS changes. You might need to adjust the Liquid code that generates image tags to ensure high-resolution images are served for fixed banners.

 

The reduction in image quality after applying the first code might be related to the way images are being scaled or the browser's scaling algorithm. To potentially improve image quality, consider using the image-rendering: high-quality; CSS property. This property specifies a high-quality scaling algorithm, which might enhance the appearance of your images when scaled up or down. However, be aware that this can increase computational power requirements​​.

Here the current code taken from the Chrome Developer Console:

Spoiler
<ul id="Slider-template--20767575474524__featured_collection_MwiXim" class="grid product-grid contains-card contains-card--product contains-card--standard grid--4-col-desktop grid--2-col-tablet-down slider slider--tablet grid--peek" role="list" aria-label="Slider"><li id="Slide-template--20767575474524__featured_collection_MwiXim-1" class="grid__item slider__slide scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: 0;">
            

<link href="//fiveprayers.de/cdn/shop/t/1/assets/component-rating.css?v=157771854592137137841706717088" rel="stylesheet" type="text/css" media="all">
<link href="//fiveprayers.de/cdn/shop/t/1/assets/component-volume-pricing.css?v=56284703641257077881706717091" rel="stylesheet" type="text/css" media="all">
<div class="card-wrapper product-card-wrapper underline-links-hover">
    <div class="
        card card--standard
         card--media
        
        
        
        
        
      " style="--ratio-percent: 100.0%;">
      <div class="card__inner color-scheme-2 gradient ratio" style="--ratio-percent: 100.0%;"><div class="card__media">
            <div class="media media--transparent media--hover-effect">
              
              <img srcset="//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&amp;width=165 165w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&amp;width=360 360w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&amp;width=533 533w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&amp;width=720 720w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&amp;width=940 940w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&amp;width=1066 1066w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964 2000w
                " src="//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&amp;width=533" sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt="Hoodie Blind Black" class="motion-reduce" loading="lazy" width="2000" height="2000">
              
<img srcset="//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&amp;width=165 165w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&amp;width=360 360w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&amp;width=533 533w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&amp;width=720 720w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&amp;width=940 940w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&amp;width=1066 1066w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964 2000w
                  " src="//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&amp;width=533" sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt="" class="motion-reduce" loading="lazy" width="2000" height="2000"></div>
          </div><div class="card__content">
          <div class="card__information">
            <h3 class="card__heading">
              <a href="/products/hoodie-blind-black" id="StandardCardNoMediaLink-template--20767575474524__featured_collection_MwiXim-8735023825244" class="full-unstyled-link" aria-labelledby="StandardCardNoMediaLink-template--20767575474524__featured_collection_MwiXim-8735023825244 NoMediaStandardBadge-template--20767575474524__featured_collection_MwiXim-8735023825244">
                Hoodie Blind Black
              </a>
            </h3>
          </div>
          <div class="card__badge bottom left"><span id="NoMediaStandardBadge-template--20767575474524__featured_collection_MwiXim-8735023825244" class="badge badge--bottom-left color-scheme-3">Ausverkauft</span></div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading h5" id="title-template--20767575474524__featured_collection_MwiXim-8735023825244">
            <a href="/products/hoodie-blind-black" id="CardLink-template--20767575474524__featured_collection_MwiXim-8735023825244" class="full-unstyled-link" aria-labelledby="CardLink-template--20767575474524__featured_collection_MwiXim-8735023825244 Badge-template--20767575474524__featured_collection_MwiXim-8735023825244">
              Hoodie Blind Black
            </a>
          </h3>
          <div class="card-information"><span class="visually-hidden">Anbieter:</span>
              <div class="caption-with-letter-spacing light">FIVE PRAYERS</div><span class="caption-large light"></span>
<div class="
    price  price--sold-out">
  <div class="price__container"><div class="price__regular"><span class="visually-hidden visually-hidden--inline">Normaler Preis</span>
        <span class="price-item price-item--regular">
          €44,90 EUR
        </span></div>
    <div class="price__sale">
        <span class="visually-hidden visually-hidden--inline">Normaler Preis</span>
        <span>
          <s class="price-item price-item--regular">
            
              
            
          </s>
        </span><span class="visually-hidden visually-hidden--inline">Verkaufspreis</span>
      <span class="price-item price-item--sale price-item--last">
        €44,90 EUR
      </span>
    </div>
    <small class="unit-price caption hidden">
      <span class="visually-hidden">Stückpreis</span>
      <span class="price-item price-item--last">
        <span></span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;pro&nbsp;</span>
        <span>
        </span>
      </span>
    </small>
  </div></div>

</div>
        </div><div class="card__badge bottom left"><span id="Badge-template--20767575474524__featured_collection_MwiXim-8735023825244" class="badge badge--bottom-left color-scheme-3">Ausverkauft</span></div>
      </div>
    </div>
  </div>
          </li><li id="Slide-template--20767575474524__featured_collection_MwiXim-2" class="grid__item slider__slide scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: 1;">
            

<link href="//fiveprayers.de/cdn/shop/t/1/assets/component-rating.css?v=157771854592137137841706717088" rel="stylesheet" type="text/css" media="all">
<link href="//fiveprayers.de/cdn/shop/t/1/assets/component-volume-pricing.css?v=56284703641257077881706717091" rel="stylesheet" type="text/css" media="all">
<div class="card-wrapper product-card-wrapper underline-links-hover">
    <div class="
        card card--standard
         card--media
        
        
        
        
        
      " style="--ratio-percent: 100.0%;">
      <div class="card__inner color-scheme-2 gradient ratio" style="--ratio-percent: 100.0%;"><div class="card__media">
            <div class="media media--transparent media--hover-effect">
              
              <img srcset="//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&amp;width=165 165w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&amp;width=360 360w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&amp;width=533 533w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&amp;width=720 720w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&amp;width=940 940w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&amp;width=1066 1066w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583 2000w
                " src="//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&amp;width=533" sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt="Hoodie Blind Off-White" class="motion-reduce" loading="lazy" width="2000" height="2000">
              
<img srcset="//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&amp;width=165 165w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&amp;width=360 360w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&amp;width=533 533w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&amp;width=720 720w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&amp;width=940 940w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&amp;width=1066 1066w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583 2000w
                  " src="//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&amp;width=533" sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt="" class="motion-reduce" loading="lazy" width="2000" height="2000"></div>
          </div><div class="card__content">
          <div class="card__information">
            <h3 class="card__heading">
              <a href="/products/hoodie-blind-off-white" id="StandardCardNoMediaLink-template--20767575474524__featured_collection_MwiXim-8735020941660" class="full-unstyled-link" aria-labelledby="StandardCardNoMediaLink-template--20767575474524__featured_collection_MwiXim-8735020941660 NoMediaStandardBadge-template--20767575474524__featured_collection_MwiXim-8735020941660">
                Hoodie Blind Off-White
              </a>
            </h3>
          </div>
          <div class="card__badge bottom left"><span id="NoMediaStandardBadge-template--20767575474524__featured_collection_MwiXim-8735020941660" class="badge badge--bottom-left color-scheme-3">Ausverkauft</span></div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading h5" id="title-template--20767575474524__featured_collection_MwiXim-8735020941660">
            <a href="/products/hoodie-blind-off-white" id="CardLink-template--20767575474524__featured_collection_MwiXim-8735020941660" class="full-unstyled-link" aria-labelledby="CardLink-template--20767575474524__featured_collection_MwiXim-8735020941660 Badge-template--20767575474524__featured_collection_MwiXim-8735020941660">
              Hoodie Blind Off-White
            </a>
          </h3>
          <div class="card-information"><span class="visually-hidden">Anbieter:</span>
              <div class="caption-with-letter-spacing light">FIVE PRAYERS</div><span class="caption-large light"></span>
<div class="
    price  price--sold-out">
  <div class="price__container"><div class="price__regular"><span class="visually-hidden visually-hidden--inline">Normaler Preis</span>
        <span class="price-item price-item--regular">
          €44,90 EUR
        </span></div>
    <div class="price__sale">
        <span class="visually-hidden visually-hidden--inline">Normaler Preis</span>
        <span>
          <s class="price-item price-item--regular">
            
              
            
          </s>
        </span><span class="visually-hidden visually-hidden--inline">Verkaufspreis</span>
      <span class="price-item price-item--sale price-item--last">
        €44,90 EUR
      </span>
    </div>
    <small class="unit-price caption hidden">
      <span class="visually-hidden">Stückpreis</span>
      <span class="price-item price-item--last">
        <span></span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;pro&nbsp;</span>
        <span>
        </span>
      </span>
    </small>
  </div></div>

</div>
        </div><div class="card__badge bottom left"><span id="Badge-template--20767575474524__featured_collection_MwiXim-8735020941660" class="badge badge--bottom-left color-scheme-3">Ausverkauft</span></div>
      </div>
    </div>
  </div>
          </li><li id="Slide-template--20767575474524__featured_collection_MwiXim-3" class="grid__item slider__slide scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: 2;">
            

<link href="//fiveprayers.de/cdn/shop/t/1/assets/component-rating.css?v=157771854592137137841706717088" rel="stylesheet" type="text/css" media="all">
<link href="//fiveprayers.de/cdn/shop/t/1/assets/component-volume-pricing.css?v=56284703641257077881706717091" rel="stylesheet" type="text/css" media="all">
<div class="card-wrapper product-card-wrapper underline-links-hover">
    <div class="
        card card--standard
         card--media
        
        
        
        
        
      " style="--ratio-percent: 100.0%;">
      <div class="card__inner color-scheme-2 gradient ratio" style="--ratio-percent: 100.0%;"><div class="card__media">
            <div class="media media--transparent media--hover-effect">
              
              <img srcset="//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&amp;width=165 165w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&amp;width=360 360w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&amp;width=533 533w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&amp;width=720 720w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&amp;width=940 940w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&amp;width=1066 1066w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507 2000w
                " src="//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&amp;width=533" sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt="Tee Hearts Black" class="motion-reduce" loading="lazy" width="2000" height="2000">
              
<img srcset="//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&amp;width=165 165w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&amp;width=360 360w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&amp;width=533 533w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&amp;width=720 720w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&amp;width=940 940w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&amp;width=1066 1066w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507 2000w
                  " src="//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&amp;width=533" sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt="" class="motion-reduce" loading="lazy" width="2000" height="2000"></div>
          </div><div class="card__content">
          <div class="card__information">
            <h3 class="card__heading">
              <a href="/products/tee-hearts-black" id="StandardCardNoMediaLink-template--20767575474524__featured_collection_MwiXim-8735016223068" class="full-unstyled-link" aria-labelledby="StandardCardNoMediaLink-template--20767575474524__featured_collection_MwiXim-8735016223068 NoMediaStandardBadge-template--20767575474524__featured_collection_MwiXim-8735016223068">
                Tee Hearts Black
              </a>
            </h3>
          </div>
          <div class="card__badge bottom left"><span id="NoMediaStandardBadge-template--20767575474524__featured_collection_MwiXim-8735016223068" class="badge badge--bottom-left color-scheme-3">Ausverkauft</span></div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading h5" id="title-template--20767575474524__featured_collection_MwiXim-8735016223068">
            <a href="/products/tee-hearts-black" id="CardLink-template--20767575474524__featured_collection_MwiXim-8735016223068" class="full-unstyled-link" aria-labelledby="CardLink-template--20767575474524__featured_collection_MwiXim-8735016223068 Badge-template--20767575474524__featured_collection_MwiXim-8735016223068">
              Tee Hearts Black
            </a>
          </h3>
          <div class="card-information"><span class="visually-hidden">Anbieter:</span>
              <div class="caption-with-letter-spacing light">FIVE PRAYERS</div><span class="caption-large light"></span>
<div class="
    price  price--sold-out">
  <div class="price__container"><div class="price__regular"><span class="visually-hidden visually-hidden--inline">Normaler Preis</span>
        <span class="price-item price-item--regular">
          €29,95 EUR
        </span></div>
    <div class="price__sale">
        <span class="visually-hidden visually-hidden--inline">Normaler Preis</span>
        <span>
          <s class="price-item price-item--regular">
            
              
            
          </s>
        </span><span class="visually-hidden visually-hidden--inline">Verkaufspreis</span>
      <span class="price-item price-item--sale price-item--last">
        €29,95 EUR
      </span>
    </div>
    <small class="unit-price caption hidden">
      <span class="visually-hidden">Stückpreis</span>
      <span class="price-item price-item--last">
        <span></span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;pro&nbsp;</span>
        <span>
        </span>
      </span>
    </small>
  </div></div>

</div>
        </div><div class="card__badge bottom left"><span id="Badge-template--20767575474524__featured_collection_MwiXim-8735016223068" class="badge badge--bottom-left color-scheme-3">Ausverkauft</span></div>
      </div>
    </div>
  </div>
          </li><li id="Slide-template--20767575474524__featured_collection_MwiXim-4" class="grid__item slider__slide scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: 3;">
            

<link href="//fiveprayers.de/cdn/shop/t/1/assets/component-rating.css?v=157771854592137137841706717088" rel="stylesheet" type="text/css" media="all">
<link href="//fiveprayers.de/cdn/shop/t/1/assets/component-volume-pricing.css?v=56284703641257077881706717091" rel="stylesheet" type="text/css" media="all">
<div class="card-wrapper product-card-wrapper underline-links-hover">
    <div class="
        card card--standard
         card--media
        
        
        
        
        
      " style="--ratio-percent: 100.0%;">
      <div class="card__inner color-scheme-2 gradient ratio" style="--ratio-percent: 100.0%;"><div class="card__media">
            <div class="media media--transparent media--hover-effect">
              
              <img srcset="//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&amp;width=165 165w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&amp;width=360 360w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&amp;width=533 533w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&amp;width=720 720w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&amp;width=940 940w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&amp;width=1066 1066w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654 2000w
                " src="//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&amp;width=533" sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt="Tee Hearts Off White" class="motion-reduce" loading="lazy" width="2000" height="2000">
              
<img srcset="//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&amp;width=165 165w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&amp;width=360 360w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&amp;width=533 533w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&amp;width=720 720w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&amp;width=940 940w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&amp;width=1066 1066w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654 2000w
                  " src="//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&amp;width=533" sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt="" class="motion-reduce" loading="lazy" width="2000" height="2000"></div>
          </div><div class="card__content">
          <div class="card__information">
            <h3 class="card__heading">
              <a href="/products/tee" id="StandardCardNoMediaLink-template--20767575474524__featured_collection_MwiXim-8732925919580" class="full-unstyled-link" aria-labelledby="StandardCardNoMediaLink-template--20767575474524__featured_collection_MwiXim-8732925919580 NoMediaStandardBadge-template--20767575474524__featured_collection_MwiXim-8732925919580">
                Tee Hearts Off White
              </a>
            </h3>
          </div>
          <div class="card__badge bottom left"><span id="NoMediaStandardBadge-template--20767575474524__featured_collection_MwiXim-8732925919580" class="badge badge--bottom-left color-scheme-3">Ausverkauft</span></div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading h5" id="title-template--20767575474524__featured_collection_MwiXim-8732925919580">
            <a href="/products/tee" id="CardLink-template--20767575474524__featured_collection_MwiXim-8732925919580" class="full-unstyled-link" aria-labelledby="CardLink-template--20767575474524__featured_collection_MwiXim-8732925919580 Badge-template--20767575474524__featured_collection_MwiXim-8732925919580">
              Tee Hearts Off White
            </a>
          </h3>
          <div class="card-information"><span class="visually-hidden">Anbieter:</span>
              <div class="caption-with-letter-spacing light">FIVE PRAYERS</div><span class="caption-large light"></span>
<div class="
    price  price--sold-out">
  <div class="price__container"><div class="price__regular"><span class="visually-hidden visually-hidden--inline">Normaler Preis</span>
        <span class="price-item price-item--regular">
          €29,95 EUR
        </span></div>
    <div class="price__sale">
        <span class="visually-hidden visually-hidden--inline">Normaler Preis</span>
        <span>
          <s class="price-item price-item--regular">
            
              
            
          </s>
        </span><span class="visually-hidden visually-hidden--inline">Verkaufspreis</span>
      <span class="price-item price-item--sale price-item--last">
        €29,95 EUR
      </span>
    </div>
    <small class="unit-price caption hidden">
      <span class="visually-hidden">Stückpreis</span>
      <span class="price-item price-item--last">
        <span></span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;pro&nbsp;</span>
        <span>
        </span>
      </span>
    </small>
  </div></div>

</div>
        </div><div class="card__badge bottom left"><span id="Badge-template--20767575474524__featured_collection_MwiXim-8732925919580" class="badge badge--bottom-left color-scheme-3">Ausverkauft</span></div>
      </div>
    </div>
  </div>
          </li></ul>

The potential causes for the images being blurry on the desktop, but not on mobile, could be closely related to the srcset and sizes attributes used in the <img> tags. Here are the specific points in your code that could be contributing to this issue:

  1. srcset Attribute Configuration:

    • The srcset attribute lists multiple image sources along with their respective widths. This attribute allows browsers to select the most appropriate image size based on the current viewport width and the pixel density of the display.
    • Your code snippet provides a good range of image widths (165w to 2000w), which should ideally cover a wide range of device widths and resolutions. However, if the browser chooses an image size that's too small for the container in which it's displayed, this can lead to the image appearing blurry when scaled up to fit the container.
  2. sizes Attribute Configuration:

    • The sizes attribute specifies the expected display width of the image in different viewport conditions. It seems like the sizes you've specified ((min-width: 1200px) 267px, ...) might not accurately represent the actual size of the image container in the layout on desktop screens.
    • If the sizes attribute underestimates the actual size of the image on larger screens, browsers might end up selecting lower-resolution images from the srcset list, leading to blurry images when they are scaled up to fill the container.
  3. CSS and HTML Structure:

    • The CSS classes applied to the containers (card card--standard card--media, card__inner, media media--transparent media--hover-effect) might influence the sizing and scaling of the images. CSS rules associated with these classes could affect the final display size of the images, potentially causing them to stretch beyond their optimal resolution.
    • The inline style style="--ratio-percent: 100.0%;" suggests that there might be custom CSS variables controlling aspect ratios or other dimensions of the images or their containers. If these variables cause the images to be displayed larger than the widths specified in the srcset, that could lead to blurriness.

Potential Solutions:

  • Review and Adjust the sizes Attribute: Ensure that the values accurately reflect the display size of the images across different viewport widths, especially for desktop. You might need to increase the size values for desktop viewports to ensure that higher resolution images are selected by the browser.
  • Inspect and Modify CSS Rules: Check the CSS rules associated with the classes and inline styles affecting the image containers. Make sure these rules do not cause the images to scale up beyond their original sizes in the srcset.
  • Test with Different Images: Experiment by temporarily adjusting the srcset and sizes attributes to force higher resolution images to load on desktop screens. This can help identify if the issue is with the image selection process based on these attributes.

By carefully reviewing and adjusting the srcset and sizes attributes to better match the actual sizes at which images are displayed on desktop screens, you can likely resolve the issue of the images appearing blurry.

 

Feel free to ask the expert in your other thread! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

7 ANTWORTEN 7

Gabe
Shopify Staff
15895 2516 3758

Hey @real_Maestro 

 

You have reached the German community here but we can chat in English too, that's no problem! 😉

 

The reduction in image quality might be due to if the image is being scaled up from a smaller size, i.e. it may appear pixelated or blurry. Ensure that the images used are of high resolution and are not being stretched beyond their original dimensions. Shopify automatically optimizes images to reduce loading times too. 

So it can be down to scaling algorithms used by browsers. You can use the CSS image-rendering property, which allows you to specify a scaling algorithm for your images. For your case, you might want to try the high-quality value, which uses a higher-quality scaling algorithm, although it requires more computational power. This property can improve the appearance of images when they are scaled up or down. Here's how you can use it:

 

.banner__media {
    image-rendering: high-quality;
}

 

The issue with the footer becoming transparent is likely due to the .banner .banner__media.media img { position: fixed; } CSS rule you added. When you make an element fixed, it can affect the layout of other elements on the page. You need to adjust the CSS for the footer to ensure it has a solid background like adding a CSS to define a background color for your footer (you can change #FFFFFF to any color you prefer), like this example:

 

footer {
    background-color: #FFFFFF; /* Replace #FFFFFF with the desired color */
}

 

If it doesn't work, there might be other CSS rules that are overriding this - use the !important declaration to ensure your rule takes precedence.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

real_Maestro
Tourist
11 0 1

Hey @Gabe 

 

thanks for the quick reply. The original image quality was perfectly fine. It just seems blurry after applying the first code i posted. 

 

And do yout know, how i can fix the other issue?

 

thanks in advance

Gabe
Shopify Staff
15895 2516 3758

@real_Maestro 

 

Refresh above as I was still writing...

 

Also see UsefulAngle's article on maintaining image quality with CSS transform and scale.

 

The footer becoming transparent can arise due to the way the fixed positioning removes an element from the normal DOM flow, which can affect the layout and appearance of subsequent elements, like your footer.

One approach to address this issue is to ensure that all HTML elements above the footer are wrapped in a container div. This structure allows you to set the minimum height of the container to the height of the viewport minus the height of the footer. For example, if your footer is 55px high, you can use the following CSS:

 

div.container {
    min-height: calc(100vh - 55px);
}

 

Another method is adjusting the positioning and z-index of elements, like, if an element is hidden underneath a fixed-position header, adding padding-top to the top element or adjusting the z-index might help. Or adding an invisible border-top to the element can give the margin something to push against, which can help position the element correctly without needing to add extra divs.

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

real_Maestro
Tourist
11 0 1

First of all, thanks a lot for all the time you put into your answer! Guys like you are the real heroes.

 

Regarding the footer: the dev container didnt work, and i dont know where i should put the "padding top" command. Every code (even with !important added) wont work after i add this:

 

<style>
.banner .banner__media.media img {
position: fixed;
}
</style>

 

So after this code, the footer is transparent and nothing can change it.. 

 

And regarding the image quality: the code to improve the quality didnt do any changes also. The Shopify shop banner was crystal clear, because the banner is 4998x3332 px. But just only after adding the code for the different banners, both images get blurry.

 

Im just before resigning...

Gabe
Shopify Staff
15895 2516 3758

Erfolg.

Hey @real_Maestro 

 

Oh thanks and glad to help! And never give up, you got this! 😉

 

giphy

 

I checked fiveprayers.de on my mobile and it looks great. And I can see one of our experts helped you here. However, there now seems to be an issue with picture quality on Desktop with your image banner and I highly recommend you keep the store password protected until all is perfect as you don't want your future clientele to stumbled into a 🚧!

 

So on my desktop screen on most browsers, the Hoodies are looking slightly blurry if you 👀 closer:

 

02-38-66vhb-fdp9j.png

 

So let's go through the code changes here one by one and see where the 🐞 is in the code:

 

The image quality degradation when applying your initial CSS code to make banners fixed could be due to several factors unrelated directly to the CSS fix itself. Shopify themes, including Dawn, dynamically serve scaled images based on the device and viewport to optimize loading times and performance. When you set the image position to fixed, it's possible that this interferes with how the theme calculates the image size or how it serves the appropriate image resolution.

 

The original code snippet you inserted:

 

<style>
.banner .banner__media.media img {
 position: fixed;
}
</style>

 

This code makes the banner image fixed, but it doesn't directly influence the image quality. The issue might stem from how the theme's JavaScript or Liquid code handles images after your CSS changes. It's important to ensure that the images are served using Shopify's srcset attributes, which allow the browser to select the most appropriate image size based on the screen resolution and size.

 

When you remove the Liquid code that assigns image widths and fetch priorities, i.e. remove Liquid variables that are used later in the code (like widths and fetch_priority), any reference to these variables will become invalid. This is why they are highlighted, indicating an error or a warning.

 

{%- liquid
...
assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
...
-%}

 

If you remove the block that defines widths and fetch_priority, then you also need to remove or adjust any part of the code that uses these variables. They are used to dynamically set the sizes and srcset attributes of image tags, which are crucial for responsive and efficient image loading. Removing these without a proper replacement could further impact your site's performance and the visual quality of images.

 

Ensure that the image serving mechanism (like srcset) is not disrupted by the CSS changes. You might need to adjust the Liquid code that generates image tags to ensure high-resolution images are served for fixed banners.

 

The reduction in image quality after applying the first code might be related to the way images are being scaled or the browser's scaling algorithm. To potentially improve image quality, consider using the image-rendering: high-quality; CSS property. This property specifies a high-quality scaling algorithm, which might enhance the appearance of your images when scaled up or down. However, be aware that this can increase computational power requirements​​.

Here the current code taken from the Chrome Developer Console:

Spoiler
<ul id="Slider-template--20767575474524__featured_collection_MwiXim" class="grid product-grid contains-card contains-card--product contains-card--standard grid--4-col-desktop grid--2-col-tablet-down slider slider--tablet grid--peek" role="list" aria-label="Slider"><li id="Slide-template--20767575474524__featured_collection_MwiXim-1" class="grid__item slider__slide scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: 0;">
            

<link href="//fiveprayers.de/cdn/shop/t/1/assets/component-rating.css?v=157771854592137137841706717088" rel="stylesheet" type="text/css" media="all">
<link href="//fiveprayers.de/cdn/shop/t/1/assets/component-volume-pricing.css?v=56284703641257077881706717091" rel="stylesheet" type="text/css" media="all">
<div class="card-wrapper product-card-wrapper underline-links-hover">
    <div class="
        card card--standard
         card--media
        
        
        
        
        
      " style="--ratio-percent: 100.0%;">
      <div class="card__inner color-scheme-2 gradient ratio" style="--ratio-percent: 100.0%;"><div class="card__media">
            <div class="media media--transparent media--hover-effect">
              
              <img srcset="//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&amp;width=165 165w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&amp;width=360 360w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&amp;width=533 533w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&amp;width=720 720w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&amp;width=940 940w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&amp;width=1066 1066w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964 2000w
                " src="//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&amp;width=533" sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt="Hoodie Blind Black" class="motion-reduce" loading="lazy" width="2000" height="2000">
              
<img srcset="//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&amp;width=165 165w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&amp;width=360 360w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&amp;width=533 533w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&amp;width=720 720w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&amp;width=940 940w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&amp;width=1066 1066w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964 2000w
                  " src="//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&amp;width=533" sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt="" class="motion-reduce" loading="lazy" width="2000" height="2000"></div>
          </div><div class="card__content">
          <div class="card__information">
            <h3 class="card__heading">
              <a href="/products/hoodie-blind-black" id="StandardCardNoMediaLink-template--20767575474524__featured_collection_MwiXim-8735023825244" class="full-unstyled-link" aria-labelledby="StandardCardNoMediaLink-template--20767575474524__featured_collection_MwiXim-8735023825244 NoMediaStandardBadge-template--20767575474524__featured_collection_MwiXim-8735023825244">
                Hoodie Blind Black
              </a>
            </h3>
          </div>
          <div class="card__badge bottom left"><span id="NoMediaStandardBadge-template--20767575474524__featured_collection_MwiXim-8735023825244" class="badge badge--bottom-left color-scheme-3">Ausverkauft</span></div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading h5" id="title-template--20767575474524__featured_collection_MwiXim-8735023825244">
            <a href="/products/hoodie-blind-black" id="CardLink-template--20767575474524__featured_collection_MwiXim-8735023825244" class="full-unstyled-link" aria-labelledby="CardLink-template--20767575474524__featured_collection_MwiXim-8735023825244 Badge-template--20767575474524__featured_collection_MwiXim-8735023825244">
              Hoodie Blind Black
            </a>
          </h3>
          <div class="card-information"><span class="visually-hidden">Anbieter:</span>
              <div class="caption-with-letter-spacing light">FIVE PRAYERS</div><span class="caption-large light"></span>
<div class="
    price  price--sold-out">
  <div class="price__container"><div class="price__regular"><span class="visually-hidden visually-hidden--inline">Normaler Preis</span>
        <span class="price-item price-item--regular">
          €44,90 EUR
        </span></div>
    <div class="price__sale">
        <span class="visually-hidden visually-hidden--inline">Normaler Preis</span>
        <span>
          <s class="price-item price-item--regular">
            
              
            
          </s>
        </span><span class="visually-hidden visually-hidden--inline">Verkaufspreis</span>
      <span class="price-item price-item--sale price-item--last">
        €44,90 EUR
      </span>
    </div>
    <small class="unit-price caption hidden">
      <span class="visually-hidden">Stückpreis</span>
      <span class="price-item price-item--last">
        <span></span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;pro&nbsp;</span>
        <span>
        </span>
      </span>
    </small>
  </div></div>

</div>
        </div><div class="card__badge bottom left"><span id="Badge-template--20767575474524__featured_collection_MwiXim-8735023825244" class="badge badge--bottom-left color-scheme-3">Ausverkauft</span></div>
      </div>
    </div>
  </div>
          </li><li id="Slide-template--20767575474524__featured_collection_MwiXim-2" class="grid__item slider__slide scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: 1;">
            

<link href="//fiveprayers.de/cdn/shop/t/1/assets/component-rating.css?v=157771854592137137841706717088" rel="stylesheet" type="text/css" media="all">
<link href="//fiveprayers.de/cdn/shop/t/1/assets/component-volume-pricing.css?v=56284703641257077881706717091" rel="stylesheet" type="text/css" media="all">
<div class="card-wrapper product-card-wrapper underline-links-hover">
    <div class="
        card card--standard
         card--media
        
        
        
        
        
      " style="--ratio-percent: 100.0%;">
      <div class="card__inner color-scheme-2 gradient ratio" style="--ratio-percent: 100.0%;"><div class="card__media">
            <div class="media media--transparent media--hover-effect">
              
              <img srcset="//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&amp;width=165 165w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&amp;width=360 360w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&amp;width=533 533w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&amp;width=720 720w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&amp;width=940 940w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&amp;width=1066 1066w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583 2000w
                " src="//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&amp;width=533" sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt="Hoodie Blind Off-White" class="motion-reduce" loading="lazy" width="2000" height="2000">
              
<img srcset="//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&amp;width=165 165w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&amp;width=360 360w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&amp;width=533 533w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&amp;width=720 720w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&amp;width=940 940w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&amp;width=1066 1066w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583 2000w
                  " src="//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&amp;width=533" sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt="" class="motion-reduce" loading="lazy" width="2000" height="2000"></div>
          </div><div class="card__content">
          <div class="card__information">
            <h3 class="card__heading">
              <a href="/products/hoodie-blind-off-white" id="StandardCardNoMediaLink-template--20767575474524__featured_collection_MwiXim-8735020941660" class="full-unstyled-link" aria-labelledby="StandardCardNoMediaLink-template--20767575474524__featured_collection_MwiXim-8735020941660 NoMediaStandardBadge-template--20767575474524__featured_collection_MwiXim-8735020941660">
                Hoodie Blind Off-White
              </a>
            </h3>
          </div>
          <div class="card__badge bottom left"><span id="NoMediaStandardBadge-template--20767575474524__featured_collection_MwiXim-8735020941660" class="badge badge--bottom-left color-scheme-3">Ausverkauft</span></div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading h5" id="title-template--20767575474524__featured_collection_MwiXim-8735020941660">
            <a href="/products/hoodie-blind-off-white" id="CardLink-template--20767575474524__featured_collection_MwiXim-8735020941660" class="full-unstyled-link" aria-labelledby="CardLink-template--20767575474524__featured_collection_MwiXim-8735020941660 Badge-template--20767575474524__featured_collection_MwiXim-8735020941660">
              Hoodie Blind Off-White
            </a>
          </h3>
          <div class="card-information"><span class="visually-hidden">Anbieter:</span>
              <div class="caption-with-letter-spacing light">FIVE PRAYERS</div><span class="caption-large light"></span>
<div class="
    price  price--sold-out">
  <div class="price__container"><div class="price__regular"><span class="visually-hidden visually-hidden--inline">Normaler Preis</span>
        <span class="price-item price-item--regular">
          €44,90 EUR
        </span></div>
    <div class="price__sale">
        <span class="visually-hidden visually-hidden--inline">Normaler Preis</span>
        <span>
          <s class="price-item price-item--regular">
            
              
            
          </s>
        </span><span class="visually-hidden visually-hidden--inline">Verkaufspreis</span>
      <span class="price-item price-item--sale price-item--last">
        €44,90 EUR
      </span>
    </div>
    <small class="unit-price caption hidden">
      <span class="visually-hidden">Stückpreis</span>
      <span class="price-item price-item--last">
        <span></span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;pro&nbsp;</span>
        <span>
        </span>
      </span>
    </small>
  </div></div>

</div>
        </div><div class="card__badge bottom left"><span id="Badge-template--20767575474524__featured_collection_MwiXim-8735020941660" class="badge badge--bottom-left color-scheme-3">Ausverkauft</span></div>
      </div>
    </div>
  </div>
          </li><li id="Slide-template--20767575474524__featured_collection_MwiXim-3" class="grid__item slider__slide scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: 2;">
            

<link href="//fiveprayers.de/cdn/shop/t/1/assets/component-rating.css?v=157771854592137137841706717088" rel="stylesheet" type="text/css" media="all">
<link href="//fiveprayers.de/cdn/shop/t/1/assets/component-volume-pricing.css?v=56284703641257077881706717091" rel="stylesheet" type="text/css" media="all">
<div class="card-wrapper product-card-wrapper underline-links-hover">
    <div class="
        card card--standard
         card--media
        
        
        
        
        
      " style="--ratio-percent: 100.0%;">
      <div class="card__inner color-scheme-2 gradient ratio" style="--ratio-percent: 100.0%;"><div class="card__media">
            <div class="media media--transparent media--hover-effect">
              
              <img srcset="//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&amp;width=165 165w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&amp;width=360 360w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&amp;width=533 533w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&amp;width=720 720w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&amp;width=940 940w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&amp;width=1066 1066w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507 2000w
                " src="//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&amp;width=533" sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt="Tee Hearts Black" class="motion-reduce" loading="lazy" width="2000" height="2000">
              
<img srcset="//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&amp;width=165 165w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&amp;width=360 360w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&amp;width=533 533w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&amp;width=720 720w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&amp;width=940 940w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&amp;width=1066 1066w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507 2000w
                  " src="//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&amp;width=533" sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt="" class="motion-reduce" loading="lazy" width="2000" height="2000"></div>
          </div><div class="card__content">
          <div class="card__information">
            <h3 class="card__heading">
              <a href="/products/tee-hearts-black" id="StandardCardNoMediaLink-template--20767575474524__featured_collection_MwiXim-8735016223068" class="full-unstyled-link" aria-labelledby="StandardCardNoMediaLink-template--20767575474524__featured_collection_MwiXim-8735016223068 NoMediaStandardBadge-template--20767575474524__featured_collection_MwiXim-8735016223068">
                Tee Hearts Black
              </a>
            </h3>
          </div>
          <div class="card__badge bottom left"><span id="NoMediaStandardBadge-template--20767575474524__featured_collection_MwiXim-8735016223068" class="badge badge--bottom-left color-scheme-3">Ausverkauft</span></div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading h5" id="title-template--20767575474524__featured_collection_MwiXim-8735016223068">
            <a href="/products/tee-hearts-black" id="CardLink-template--20767575474524__featured_collection_MwiXim-8735016223068" class="full-unstyled-link" aria-labelledby="CardLink-template--20767575474524__featured_collection_MwiXim-8735016223068 Badge-template--20767575474524__featured_collection_MwiXim-8735016223068">
              Tee Hearts Black
            </a>
          </h3>
          <div class="card-information"><span class="visually-hidden">Anbieter:</span>
              <div class="caption-with-letter-spacing light">FIVE PRAYERS</div><span class="caption-large light"></span>
<div class="
    price  price--sold-out">
  <div class="price__container"><div class="price__regular"><span class="visually-hidden visually-hidden--inline">Normaler Preis</span>
        <span class="price-item price-item--regular">
          €29,95 EUR
        </span></div>
    <div class="price__sale">
        <span class="visually-hidden visually-hidden--inline">Normaler Preis</span>
        <span>
          <s class="price-item price-item--regular">
            
              
            
          </s>
        </span><span class="visually-hidden visually-hidden--inline">Verkaufspreis</span>
      <span class="price-item price-item--sale price-item--last">
        €29,95 EUR
      </span>
    </div>
    <small class="unit-price caption hidden">
      <span class="visually-hidden">Stückpreis</span>
      <span class="price-item price-item--last">
        <span></span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;pro&nbsp;</span>
        <span>
        </span>
      </span>
    </small>
  </div></div>

</div>
        </div><div class="card__badge bottom left"><span id="Badge-template--20767575474524__featured_collection_MwiXim-8735016223068" class="badge badge--bottom-left color-scheme-3">Ausverkauft</span></div>
      </div>
    </div>
  </div>
          </li><li id="Slide-template--20767575474524__featured_collection_MwiXim-4" class="grid__item slider__slide scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: 3;">
            

<link href="//fiveprayers.de/cdn/shop/t/1/assets/component-rating.css?v=157771854592137137841706717088" rel="stylesheet" type="text/css" media="all">
<link href="//fiveprayers.de/cdn/shop/t/1/assets/component-volume-pricing.css?v=56284703641257077881706717091" rel="stylesheet" type="text/css" media="all">
<div class="card-wrapper product-card-wrapper underline-links-hover">
    <div class="
        card card--standard
         card--media
        
        
        
        
        
      " style="--ratio-percent: 100.0%;">
      <div class="card__inner color-scheme-2 gradient ratio" style="--ratio-percent: 100.0%;"><div class="card__media">
            <div class="media media--transparent media--hover-effect">
              
              <img srcset="//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&amp;width=165 165w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&amp;width=360 360w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&amp;width=533 533w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&amp;width=720 720w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&amp;width=940 940w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&amp;width=1066 1066w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654 2000w
                " src="//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&amp;width=533" sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt="Tee Hearts Off White" class="motion-reduce" loading="lazy" width="2000" height="2000">
              
<img srcset="//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&amp;width=165 165w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&amp;width=360 360w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&amp;width=533 533w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&amp;width=720 720w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&amp;width=940 940w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&amp;width=1066 1066w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654 2000w
                  " src="//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&amp;width=533" sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt="" class="motion-reduce" loading="lazy" width="2000" height="2000"></div>
          </div><div class="card__content">
          <div class="card__information">
            <h3 class="card__heading">
              <a href="/products/tee" id="StandardCardNoMediaLink-template--20767575474524__featured_collection_MwiXim-8732925919580" class="full-unstyled-link" aria-labelledby="StandardCardNoMediaLink-template--20767575474524__featured_collection_MwiXim-8732925919580 NoMediaStandardBadge-template--20767575474524__featured_collection_MwiXim-8732925919580">
                Tee Hearts Off White
              </a>
            </h3>
          </div>
          <div class="card__badge bottom left"><span id="NoMediaStandardBadge-template--20767575474524__featured_collection_MwiXim-8732925919580" class="badge badge--bottom-left color-scheme-3">Ausverkauft</span></div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading h5" id="title-template--20767575474524__featured_collection_MwiXim-8732925919580">
            <a href="/products/tee" id="CardLink-template--20767575474524__featured_collection_MwiXim-8732925919580" class="full-unstyled-link" aria-labelledby="CardLink-template--20767575474524__featured_collection_MwiXim-8732925919580 Badge-template--20767575474524__featured_collection_MwiXim-8732925919580">
              Tee Hearts Off White
            </a>
          </h3>
          <div class="card-information"><span class="visually-hidden">Anbieter:</span>
              <div class="caption-with-letter-spacing light">FIVE PRAYERS</div><span class="caption-large light"></span>
<div class="
    price  price--sold-out">
  <div class="price__container"><div class="price__regular"><span class="visually-hidden visually-hidden--inline">Normaler Preis</span>
        <span class="price-item price-item--regular">
          €29,95 EUR
        </span></div>
    <div class="price__sale">
        <span class="visually-hidden visually-hidden--inline">Normaler Preis</span>
        <span>
          <s class="price-item price-item--regular">
            
              
            
          </s>
        </span><span class="visually-hidden visually-hidden--inline">Verkaufspreis</span>
      <span class="price-item price-item--sale price-item--last">
        €29,95 EUR
      </span>
    </div>
    <small class="unit-price caption hidden">
      <span class="visually-hidden">Stückpreis</span>
      <span class="price-item price-item--last">
        <span></span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;pro&nbsp;</span>
        <span>
        </span>
      </span>
    </small>
  </div></div>

</div>
        </div><div class="card__badge bottom left"><span id="Badge-template--20767575474524__featured_collection_MwiXim-8732925919580" class="badge badge--bottom-left color-scheme-3">Ausverkauft</span></div>
      </div>
    </div>
  </div>
          </li></ul>

The potential causes for the images being blurry on the desktop, but not on mobile, could be closely related to the srcset and sizes attributes used in the <img> tags. Here are the specific points in your code that could be contributing to this issue:

  1. srcset Attribute Configuration:

    • The srcset attribute lists multiple image sources along with their respective widths. This attribute allows browsers to select the most appropriate image size based on the current viewport width and the pixel density of the display.
    • Your code snippet provides a good range of image widths (165w to 2000w), which should ideally cover a wide range of device widths and resolutions. However, if the browser chooses an image size that's too small for the container in which it's displayed, this can lead to the image appearing blurry when scaled up to fit the container.
  2. sizes Attribute Configuration:

    • The sizes attribute specifies the expected display width of the image in different viewport conditions. It seems like the sizes you've specified ((min-width: 1200px) 267px, ...) might not accurately represent the actual size of the image container in the layout on desktop screens.
    • If the sizes attribute underestimates the actual size of the image on larger screens, browsers might end up selecting lower-resolution images from the srcset list, leading to blurry images when they are scaled up to fill the container.
  3. CSS and HTML Structure:

    • The CSS classes applied to the containers (card card--standard card--media, card__inner, media media--transparent media--hover-effect) might influence the sizing and scaling of the images. CSS rules associated with these classes could affect the final display size of the images, potentially causing them to stretch beyond their optimal resolution.
    • The inline style style="--ratio-percent: 100.0%;" suggests that there might be custom CSS variables controlling aspect ratios or other dimensions of the images or their containers. If these variables cause the images to be displayed larger than the widths specified in the srcset, that could lead to blurriness.

Potential Solutions:

  • Review and Adjust the sizes Attribute: Ensure that the values accurately reflect the display size of the images across different viewport widths, especially for desktop. You might need to increase the size values for desktop viewports to ensure that higher resolution images are selected by the browser.
  • Inspect and Modify CSS Rules: Check the CSS rules associated with the classes and inline styles affecting the image containers. Make sure these rules do not cause the images to scale up beyond their original sizes in the srcset.
  • Test with Different Images: Experiment by temporarily adjusting the srcset and sizes attributes to force higher resolution images to load on desktop screens. This can help identify if the issue is with the image selection process based on these attributes.

By carefully reviewing and adjusting the srcset and sizes attributes to better match the actual sizes at which images are displayed on desktop screens, you can likely resolve the issue of the images appearing blurry.

 

Feel free to ask the expert in your other thread! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

real_Maestro
Tourist
11 0 1

Thank you very much! I really appreciate your time and work. Keep it up

 

wish you the best

Attila

Gabe
Shopify Staff
15895 2516 3758

giphy

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog