How to hide hero image banners on mobile only - New Shopify update

[arahming123]

I noticed shopify had a recent update and I am loving it but I need help hiding specific hero images on mobile & desktop. I created two hero images, one for desktop and the other for mobile. The code I was once using is no longer working!

[oscprofessional]

Hi @arahming123 ,

Replace you existing code with below code

.hero-mobile {
  display: none;
}
@media screen and (max-width: 768px) {
  .hero-mobile {
    display: block;
  }
  .hero-desktop {
    display: none;
  }
}

[Dan-From-Ryviu]

You can do that by adding code to Custom CSS of each section following this

Add this code to the custom CSS of the desktop section

@media (max-width: 749px) {
.hero { display: none; }
}

And this code is for Custom CSS of the mobile section

@media (min-width: 750px) {
.hero { display: none; }
}

[DaisyVo]

Hi @arahming123 I dont see any hero image banners on mobile. Please doube check on this

[arahming123]

This worked perfectly. Thank you so much!

[arahming123]

Do you mind assisting with hiding another section? I need to hide the editorial section that includes an image on the left and content on the right