Changing font colour on mobile only

Shopify Discussion
1

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.

2

@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:

websensepro_0-1736858675869.png
websensepro_0-1736858675869.png585×478 201 KB

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! :rocket: (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!

3

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

image (11).png
image (11).png369×551 90.8 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

4

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

Mateen_Asghar_3-1736860477971.png
Mateen_Asghar_3-1736860477971.png433×805 124 KB

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

Thanks!

5

None of these solutions worked :disappointed_face: 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!