Remove page header image in mobile view

How can I keep the header image for my pages on desktop view but remove the header image for mobile view? This does not apply to my “front page” as I have already made it “menu only” on front page in the Customize–> header area section. Here is my (Sydney) website:

You can do that with the below CSS code:

@media only screen and (max-width:1024px) {
  .sydney-hero-area {
    display: none;

To apply it to your site, add it into Appearance > Customize > Additional CSS in your site dashboard.