Change font on header section of website to black on mobile only (keep white for desktop)

Hi! 

Looking to change the font in my header section to black on mobile only, to increase readability since it is on top of an image background.

I have tried a few codes unsuccessfully.

Thanks for your help!

Sam

Here is a code snippet that will accomplish that on mobile. However, I think it would be more beneficial to change the text to black in general since the background is very light all around (on all devices).

//Start: Make text in Homepag ehero black on mobile
@media(max-width: 550px) {
  [data-section-id="6339b4b3a8b2184f09f0f518"] {
    h1, h2, h3, h4, h5, h6, p, span {
      color: black;
    }
  }
}
//End: Make text in Homepag ehero black on mobile