Shopify-Themes, Liquid, Logos und ähnliche Themen
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
Gelöst! Zur Lösung
Erfolg.
Hey @real_Maestro
Oh thanks and glad to help! And never give up, you got this! 😉
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:
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:
<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&width=165 165w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&width=360 360w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&width=533 533w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&width=720 720w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&width=940 940w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&width=1066 1066w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964 2000w
" src="//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&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&width=165 165w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&width=360 360w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&width=533 533w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&width=720 720w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&width=940 940w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&width=1066 1066w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964 2000w
" src="//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&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"> pro </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&width=165 165w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&width=360 360w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&width=533 533w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&width=720 720w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&width=940 940w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&width=1066 1066w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583 2000w
" src="//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&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&width=165 165w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&width=360 360w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&width=533 533w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&width=720 720w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&width=940 940w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&width=1066 1066w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583 2000w
" src="//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&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"> pro </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&width=165 165w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&width=360 360w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&width=533 533w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&width=720 720w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&width=940 940w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&width=1066 1066w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507 2000w
" src="//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&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&width=165 165w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&width=360 360w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&width=533 533w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&width=720 720w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&width=940 940w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&width=1066 1066w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507 2000w
" src="//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&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"> pro </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&width=165 165w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&width=360 360w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&width=533 533w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&width=720 720w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&width=940 940w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&width=1066 1066w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654 2000w
" src="//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&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&width=165 165w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&width=360 360w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&width=533 533w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&width=720 720w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&width=940 940w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&width=1066 1066w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654 2000w
" src="//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&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"> pro </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:
srcset
Attribute Configuration:
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.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.sizes
Attribute Configuration:
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.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.CSS and HTML Structure:
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.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:
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.srcset
.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
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
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
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
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...
Erfolg.
Hey @real_Maestro
Oh thanks and glad to help! And never give up, you got this! 😉
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:
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:
<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&width=165 165w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&width=360 360w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&width=533 533w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&width=720 720w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&width=940 940w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&width=1066 1066w,//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964 2000w
" src="//fiveprayers.de/cdn/shop/files/BlackHoodieFront.jpg?v=1706818964&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&width=165 165w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&width=360 360w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&width=533 533w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&width=720 720w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&width=940 940w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&width=1066 1066w,//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964 2000w
" src="//fiveprayers.de/cdn/shop/files/BlackHoodieBack.jpg?v=1706818964&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"> pro </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&width=165 165w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&width=360 360w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&width=533 533w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&width=720 720w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&width=940 940w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&width=1066 1066w,//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583 2000w
" src="//fiveprayers.de/cdn/shop/files/WhiteHoodieFront.jpg?v=1706819583&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&width=165 165w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&width=360 360w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&width=533 533w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&width=720 720w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&width=940 940w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&width=1066 1066w,//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583 2000w
" src="//fiveprayers.de/cdn/shop/files/WhiteHoodieBack.jpg?v=1706819583&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"> pro </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&width=165 165w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&width=360 360w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&width=533 533w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&width=720 720w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&width=940 940w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&width=1066 1066w,//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507 2000w
" src="//fiveprayers.de/cdn/shop/files/BlackShirtFront.jpg?v=1706818507&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&width=165 165w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&width=360 360w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&width=533 533w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&width=720 720w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&width=940 940w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&width=1066 1066w,//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507 2000w
" src="//fiveprayers.de/cdn/shop/files/BlackShirtBack.jpg?v=1706818507&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"> pro </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&width=165 165w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&width=360 360w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&width=533 533w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&width=720 720w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&width=940 940w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&width=1066 1066w,//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654 2000w
" src="//fiveprayers.de/cdn/shop/files/WhiteShirtFront.jpg?v=1706819654&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&width=165 165w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&width=360 360w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&width=533 533w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&width=720 720w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&width=940 940w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&width=1066 1066w,//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654 2000w
" src="//fiveprayers.de/cdn/shop/files/WhiteShirtBack.jpg?v=1706819654&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"> pro </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:
srcset
Attribute Configuration:
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.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.sizes
Attribute Configuration:
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.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.CSS and HTML Structure:
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.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:
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.srcset
.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
Thank you very much! I really appreciate your time and work. Keep it up
wish you the best
Attila
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
Mit dem Lernpfad der Shopify Academy und dem Verified Skills-Badge Expanding Your Sho...
By Shopify Feb 7, 2025Den Verkauf im Großhandel steigern: In der Shopify Academy lernst du, wie das geht, zum...
By Shopify Feb 3, 2025Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024