Swap image when in mobile

URL: https://shadowsandsecretswritingretreats.com/

I am trying to swap out the large image that is seen on desktop (with my logo and tagline) with a smaller version on mobile. (The larger one gets cut off on some phones and also moves up to sit on the white part of the ambient video, making readability BAD.)

I've tried using this code but it doesn't appear to work - when I test on my phone, it's still the overlarge desktop version of the logo.  Do I need to enter the path to the original source image in the second chunk of code?

Thanks in advance for any help!

/* Mobile about signature */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1705094220330_9140 {
    background-image: url(https://static1.squarespace.com/static/658afddb47b9862e2f024940/t/65a1ad0cd808a81ca525720e/1705094412518/Primary_Logo_SM_Black.png);
    background-size: contain;
    background-repeat: no-repeat;
}

div#block-yui_3_17_2_1_1705094220330_9140 img {
    visibility: hidden;
}
}

I can't find Image with ID div....9140 on the page you shared above. Can you check it again?

It may have changed, as I updated the image to be an SVG; the png wasn't looking sharp. Updated YUI in screenshot.

Yui ID will change to another when you reload the site

I see you used Code Block to add it? It looks fine now

Hi! Yes, it looks good on the desktop version but when in mobile, it shifts up to be in the whitespace of the video, rendering it unreadable. That's why I want to swap it out in mobile - same image, but in a different color that will be readable. 

So I think I either need to replace it altogether or (not sure if this is a thing that is possible) set the svg to be a different color when screen size drops below 768 (as it still looks ok on a tablet).

UPDATE: I tried a different tactic. I uploaded the SVG as a file and placed it in an image block.

NOTE: I am testing this on the Home (Copy) for testing page, not on the live home page.

I then added this CSS to custom CSS but it's not working - the SVG appears black regardless of breakpoint. 

/* logo svg color swap */
@media screen and (max-width:767px) {
  #Primary_Logo_Tagline {
    fill: black;
  }
}
@media screen and (min-width:768px) {
  #Primary_Logo_Tagline {
    fill: #ABA98A;
  }
}

RESOLVED!

What I did, FYI. 

1. Removed the individual fill tags within each path of my SVG. Didn't realize they were in there.

2. Added this 'invisible' SVG to a code block.

3. In the custom CSS, add styling for the svg as follows:

/* logo svg color swap */
@media screen and (max-width:767px) {
 svg {
    fill: black;
  }
}
@media screen and (min-width:768px) {
  svg {
    fill: #ABA98A;
  }
}

I now have a responsive svg that swaps color to also accommodate the color (or lack thereof) in my background ambient video.

Hi! Yes, it looks good on the desktop version but when in mobile, it shifts up to be in the whitespace of the video, rendering it unreadable. That's why I want to swap it out in mobile - same image, but in a different color that will be readable. 

So I think I either need to replace it altogether or (not sure if this is a thing that is possible) set the svg to be a different color when screen size drops below 768 (as it still looks ok on a tablet).