Customise H1 colour on mobile

Hi everyone, 

Would it be possible to make a H1 a different colour on mobile? If you look at our homepage, the text sits well on the background image. On mobile view it doesn't work. 

projectancestry.com (homepage)

Options:

Change the colour of the text on mobile to white, so that it stands out on the dark section of the image.

Or

Hide the text on mobile and instead make it show in the section below - no idea if that's achievable with CSS.

Open to any other solutions! Thank you !

You can change the text colour just on mobile with this Custom CSS, but you may want to target just the one block on that page.

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

h1 { 

color:white;

}}

Thanks for your super fast reply Ziggy! Could you correct this for me? 

@media only screen and (max-width:767px) {h1 div#block-yui_3_17_2_1_1694442169502_85889 color:white;}}

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

#block-yui_3_17_2_1_1694442169502_85889 {

h1 {

color:white;

}}}

Thank you Ziggy!

For some reason it only changed the first line of text, even though it is only one block ID?

You may have the text in multiple blocks? Or you could target the section ID?

It's only one text block...

15 minutes ago, ProjectAncestry said:

It's only one text block...

It's it all heading 1?

Ahh, no. The second line of text is H2. Should I move it into a separate text block?

Thank you so much for your help.

Keep them in one text block, I've adjusted the code to make it effect Heading 1 and Heading 2

@media only screen and (max-width:767px) {
  #block-yui_3_17_2_1_1694442169502_85889 {
    h1, h2 {
      color:white;
    }
  }
}

Thank you Ziggy.