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: http://69.89.31.90/~helpdeu8

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.

Regards,
Kharis