How to add media queries to change a picture if the screen size is small

@media only screen and (min-width: 320px) and (max-width: 480px) {
}

Try adding code in between this above code, it should work

Might be you forget to wirte ” . ” to access the class in media query,try this

@media (max-width: 480px) {
 .heroImage {
     background-image: url(https://website.org/rpow/wp-
     content/uploads/2015/10/picture.jpg);
  }
}

That’s not working either, is it okay that I’m just putting the code in Simple Custom CSS, or do I need to put it somewhere else?

Also, is this the correct use of heroImage?

Can you post a link to a page that shows the issue?

What do you mean by a page that shows the issue?

Can you post a link to a page on your site where the image should change but doesn’t?

Oh, it’s https://kidshelpingkidssac.org/. The picture on the front page is the one I’m having issues with.

Hi

i am just passing by ??

Using this can help
@media screen and (max-width: 480px) {
.heroImage {
background-image: url(“https://website.org/rpow/wp-content/uploads/2015/10/picture.jpg”);
}
}

now i think that the image that you are trying to change is on this class
.siteorigin-panels-stretch if thats the case could work:

@media screen and (max-width: 480px) {
.siteorigin-panels-stretch {
background-image: url(“https://website.org/rpow/wp-content/uploads/2015/10/picture.jpg”);
}
}

and maybe add !important to force it
example:
background-image: url(“https://website.org/rpow/wp-content/uploads/2015/10/picture.jpg”) !important;

Regards

None of that is working either

I don’t see 7xsantosx7’s code on your site. You’re using a caching/minifying plugin; have you emptied the cache after adding new code? If you don’t know how to do that, I suggest asking the plugin’s author.

Yes I’ve emptied all caches from W3 Total Cache and it didn’t change it, perhaps I should try to disable W3 Total Cache for the time being?

It couldn’t hurt. After you disable the plugin, try this CSS:

@media screen and (max-width: 480px) {
  .siteorigin-panels-stretch {
    background-image: url("https://website.org/rpow/wp-content/uploads/2015/10/picture.jpg") !important;
  }
}

Don’t forget to force-refresh your browser (check your browser’s documentation) to make sure that your browser fetches the page again instead of retrieving it from the browser’s own cache.