DAWN THEME - desktop image blurry with added code...

xnyjyh
Excursionist
134 0 6

I acquired a code to have 2 different images. One dedicated for desktop, and one dedicated for mobile view. But the images for the desktop comes out blurry than the original before the code. The code is below and perhaps someone knows how to get the desktop image as sharp and vivid as it should be, Thanks!

 

  1. .banner__media:first-child {
  2.     width: 100%;
  3. }
  4. .banner__media+.banner__media {
  5.     display: none;
  6. }
  7. @media screen and (max-width: 749px) {
  8.     .banner__media:first-child {
  9.         display: none;
  10.     }
  11.     .banner__media+.banner__media {
  12.         width: 100%;
  13.         display: block !important;
  14.     }
  15. }
  16. @media screen and (max-width: 749px) {
  17.     .banner__content::before{
  18.         padding-bottom: 150% !important;
  19.     }
  20. }
Replies 2 (2)

Jason
Shopify Expert
11185 224 2281

This CSS (assumed since we can't see it all) is doing some image switching. The blurriness would be more down to the size and quality of the image itself that we don't see in the CSS code here.

 

Are you sure the image you're loading for desktop is actually a larger image? Getting a link to see this in action would be the most helpful.

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★
xnyjyh
Excursionist
134 0 6

Oh you cant see the code? i see it under my description hmm. Ill try again lol -

  1. .banner__media:first-child {
  2.     width: 100%;
  3. }
  4. .banner__media+.banner__media {
  5.     display: none;
  6. }
  7. @media screen and (max-width: 749px) {
  8.     .banner__media:first-child {
  9.         display: none;
  10.     }
  11.     .banner__media+.banner__media {
  12.         width: 100%;
  13.         display: block !important;
  14.     }
  15. }
  16. @media screen and (max-width: 749px) {
  17.     .banner__content::before{
  18.         padding-bottom: 150% !important;
  19.     }
  20. }