How to change the banner image when the site is visited on a mobile device.

I am currently using the "Brine" template, and I would love to be able to change the banner image when the site is visited on a mobile device. Can someone advise?

I have tried the following which does not work:

@media (max-width: 600px) { body { }

#banner-area-wrapper #page-thumb img { display: none; }

#banner-area-wrapper #page-thumb { background-image: url("https:example.jpg"); background-size: cover; }}

Thank you for any help you can offer.

@Gnadsy Your code is invalid.

Can you share site url?

Hi Tuanpan,Site is not published and visibility is on private at the moment. is there anything else I can share with you that would help?

Let me expand:The image has text and it gets cut off when its resized for mobile. I don't see any other way to fix this other than making an image with smaller text that fits a mobile device. So being able to have two images that load when the max width is changed would be ideal.

@Gnadsy https://beaverhero.com/squarespace-how-to/#HowtoSetupPasswordShareSiteURL

https://clarinet-lilac-depg.squarespace.com

@Gnadsy What is access password?

pass: rose

@Gnadsy you mean banner image under logo?

yes exactly