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;
}

Can this be applied to a single text box only and not to the global paragraph style?

Text color is black on desktop (text next to image), but I want it white on mobile (text overlaps image).

On 6/27/2024 at 8:00 PM, dragoslazarin said:

Can this be applied to a single text box only and not to the global paragraph style?

Text color is black on desktop (text next to image), but I want it white on mobile (text overlaps image).

Yes. We can target BLOCK ID to do this. Can you share link to page where you have problem?

Sure, here is the link: https://www.dragoslazarin.com/portrait-pricing. Password: dragos

I want to change the font color on mobile of the following headlines: SOLO SESSION, COUPLE SESSION, FAMILY SESSION.

Thank you!

On 7/2/2024 at 3:19 PM, dragoslazarin said:

Sure, here is the link: https://www.dragoslazarin.com/portrait-pricing. Password: dragos

I want to change the font color on mobile of the following headlines: SOLO SESSION, COUPLE SESSION, FAMILY SESSION.

Thank you!

You can use this code to Custom CSS

/* text color on mobile */
@media screen and (max-width:767px) {
/* Solo session */
div#block-yui_3_17_2_1_1718953260789_212472 h3 {
    color: #f1f !important;
}
/* Couple session */
div#block-e8401dbefa0cada0176d * {
    color: #f1f !important;
}
/* Family Session */
div#block-5aa4d0f15199d5672f2f * {
    color: #f1f !important;
}
}

Hi @tuanphan,

I've tried personalising the Custom CSS you shared above.

I need to change the font colour of all copy layered ontop of the header image on the following pages to #6E5C55 on mobile:

https://studiotahini.squarespace.com/mentoria-personalizada
https://studiotahini.squarespace.com/presets
https://studiotahini.squarespace.com/blog/estilismoculinario/beige
https://studiotahini.squarespace.com/blog/receta/bizcocho
https://studiotahini.squarespace.com/blog/portfolio/flaxkale

Please could you share with me all Custom CSS that I need to add for this, please?

Thanks,
Christopher

On 7/8/2024 at 7:02 PM, one-over-four said:

Hi @tuanphan,

I've tried personalising the Custom CSS you shared above.

I need to change the font colour of all copy layered ontop of the header image on the following pages to #6E5C55 on mobile:

https://studiotahini.squarespace.com/mentoria-personalizada
https://studiotahini.squarespace.com/presets
https://studiotahini.squarespace.com/blog/estilismoculinario/beige
https://studiotahini.squarespace.com/blog/receta/bizcocho
https://studiotahini.squarespace.com/blog/portfolio/flaxkale

Please could you share with me all Custom CSS that I need to add for this, please?

Thanks,
Christopher

You mean text over image?

In my code, you will see these, it is BLOCK ID

You can follow this guide to find ID then repeat the code with your ID.