Change font color on mobile only

Hi,

I've been trying to change font color for the mobile view of the website in custom css, but to no success. It remains white, while I want it to be grey. Attached is how it shows now on the screen (I highlighted the text so you see it's there).

This is the code that I tried for the section (though I would like mobile font color to be changed for the entire website):

@media only screen and (max-width: 640px)
{ 
#section[data-section-id="6400f77651b8d66b504b2ca7"] p {color:#000000 !important}
section[data-section-id="6400f77651b8d66b504b2ca7"] h1 {color:#000000 !important}
section[data-section-id="6400f77651b8d66b504b2ca7"] h2 {color:#000000 !important}
}

Help! 🙂

PS For the time being I changed the font color on desktop to grey, but screens below show how it looked with white.

Can you share your website URL?

Have you tried this without the section IDs?

@media only screen and (max-width: 640px) {
  h1, h2, h3, h4, p, .sqsrte-large, .sqsrte-small {
    color:#000000 !important;
  }
}

Thanks, @Ziggy! The URL is https://www.roslinna20.pl

Unfortunately, the code doesn't work - I now changed the first piece of text to white so that you can see how it shows on mobile (as in: invisible on white background).

Phenomenal, thank you so much! That solves it! I added same for h2, h3 and p - works beautifully!

@Ziggy One more quick question - how to do the same for primary button?

Use this

a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element {
    color: #000000 !important;
}