Need header image to be responsive and am having problems.

Hello,

I am using the free Spacious theme (I already spoke to their support and they were unable to help me) and I am needing to have my header image change for smaller screens as the text on it become illegible when the screen gets smaller. The website can be found https://www.co-parenting.ca/

I thought the easiest way would be to include a media query in the CSS. I added the following code in:

@media only screen and (max-width: 500px) {
.wp-custom-header {
background-size: 100%;
background-repeat: no-repeat;
background-image: url(“https://www.co-parenting.ca/wp-content/uploads/2017/02/CnCPC_background_banner_mobile.jpg”);
background-position: center center;
z-index:99;
}
}

This does not work. The current header image was uploaded through the theme’s customizer.

Please let me know if there is any solution.

Thanks!!