DAWN THEME - desktop image blurry with added code

Store Design
, , ,
1

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. }

2

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.

3

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. }