Changing font colour on mobile only

[lilyandsophia]

Hi all,

I know this has been asked 1000 times before, and I think I have tried my own edits of all 1000 responses, but no luck. 

I need to change the text colour in my Video Background sections to black - ONLY on mobile (keep white on desktop). It's the same reason as everyone else who asks this question - the text moves to a white background on mobile instead of being overlayed on top of the video.

I just can't seem to get it to work. Example here at the top:

https://www.lilyandsophia.com/pages/how-we-do-it 

Thank you so much in advance for your help. 

[websensepro]

@lilyandsophia 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(max-width:990px){
.videoBoxInfo .imageBoxInfoDescription p, .videoBoxInfo h1 {
    color: black !important;
}
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[lilyandsophia]

None of these solutions worked 😞 Still white text.

The text colour selection is part of sections/background-video.liquid and I have selected white because that's what I want for the video on desktop. Might this be overriding all the css changes you are suggesting? 

Thanks for your continued support!

[DaisyVo]

Hi @lilyandsophia 

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (max-width: 768px){
body .videoBoxInfo .imageBoxInfoDescription p {
    color: black !important;
}
}

 

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[Mateen_Asghar · Accepted solution]

Hi @lilyandsophia,
Follow these steps:
1. Go to Shopify Admin => Online Store => Theme => Edit code
2. Open your theme.css or base.css file & paste the code at the bottom of the file

@media screen and (max-width: 768px) {
.videoBoxInfoTitle, .videoBackground .imageBoxInfoDescription p {
color: #000 !important;
}

If you find this helpful, kindly like and mark it as an accepted solution.

Thanks!