Replace image seen when viewing on mobile

Site URL: https://the-go-to-gal.squarespace.com/landing-page%C2%A0

https://the-go-to-gal.squarespace.com/landing-page     P/Word - tgtg2022&

Hi brains trust, hoping someone might be able to help. 

I would like to replace #block-yui_3_17_2_1_1643777114126_12964 on the above page with an alternate image when viewed on the mobile version of the site. Is any one able to assist? I can't quite seem to figure it out...

The alternate image I am hoping to replace it with is - https://live.staticflickr.com/65535/51857413073_1041f8e3eb_o.png

Your page link doesn't work I'm afraid - it comes up with a 404 - so I can't really offer a good solution until I can actually see the page.

Regardless, at a guess based on your description, the following will very likely work:

@media (max-width: 768px) {
  #block-yui_3_17_2_1_1643777114126_12964 {
    img {
      opacity: 0!important;
    }
    .image-block-wrapper::after {
      background: url(https://live.staticflickr.com/65535/51857413073_1041f8e3eb_o.png);
      background-size: cover;
      background-repeat: no-repeat;
      opacity: 1 !important;
    }
  }
}

@KwameAndCo - Ah sorry the page went live last night. The domain is www.thegotogal.net

That code appears to change the image, but it is confined to a smaller bounding box so it cuts it off... any ideas on what might be making that happen? 

Really appreciate your help! 

12 hours ago, tillie said:

That code appears to change the image, but it is confined to a smaller bounding box so it cuts it off... any ideas on what might be making that happen? 

Change cover to contain and it'll fit it inside the box.

You can adjust height/width properties of the element to make it smaller/larger.

You may also want to adjust background-position