How do I remove the hero image on mobile from my home page?

Site URL: https://johnaugustdesign.com

Hi there! I need to remove the hero image from the top section of my home page on mobile! Thank you!

Add the following to Design > Custom CSS.

@media screen and ( max-width: 767px ) {

  [data-section-id="5f5e8390d7bf523730ec3fc7"] .section-background {
  
    display: none;
    
    }
    
  }

Alternately you can put the code in Page Settings > Advanced > Page Header Code Injection for the page.
 

<style>

  @media screen and ( max-width: 767px ) {
  
    [data-section-id="5f5e8390d7bf523730ec3fc7"] .section-background {
    
      display: none;
      
      }
      
    }
    
  </style>

Let us know how it goes.

Hmm, seems like that didn't work. That goes into the script injection in the advanced tab on the home page?

It worked, I just had to add <style></style> in the injection. Thank you!!

Either way can work. Just depends on how you want to organize your code. I did make a change to the CSS to more specifically target just the hero image.