Refresh Theme - Mobile Font Color Not Changing

Store Design
, , , ,
1

Hey guys, does anyone know why my font color for mobile devices changed to black?

I have custom CSS in my base.css file that is supposed to change the color to white for mobile and desktop.

Specifically, I would like “BRINGING THE WORLD TO YOUR DOORSTEP” and “DEALS UP TO 50% OFF” in white font color.

wrldwide_1-1699122848899.png
wrldwide_1-1699122848899.png462×907 222 KB

I have !important after the color: white so I’m not sure why it’s not overriding the styling and making the font color white on mobile view.

This is my code:

  /* Main Banner Image - DESKTOP - Start */

  .slideshow__text {
    color: white !important;
    font-size: 22px;
  }
  .slideshow__text h2 {
    color: white !important;
    font-size: 50px;
  }

  /* Main Banner Image - DESKTOP - End */

  /* Main Banner Image - MOBILE - Start */
  @media only screen and (max-width: 749px) {
    .slideshow__text {
      color: white !important;
      font-size: 18px;
    }
    .slideshow__text h2 {
      color: white !important;
      font-size: 40px;
    }
  }
  /* Main Banner Image - MOBILE - End */

Website: http://wrldwidesupply.com/

Password: secret123456

Any suggestions on how to fix this?

2

Hi @wrldwide

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
h2.banner__heading.inline-richtext.h1, .banner__text.rte {
    color: white !important;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Hey @Made4uo-Ribe ,

I added your code to the bottom of my base.css file but it didn’t change anything.

So when I choose the mobile view preview within the Shopify customizer, it displays as white text - which is what I want.

But if you go on your phone, enter ( http://wrldwidesupply.com/ ) on your browser, and enter the password: secret123456, it will still show as black text (just like in the original screenshot of this post)

Any thoughts on what is happening and how we can fix?

4

Yeah, I notice that when I full screen the text white and lower screen black. Im not sure what is happening cause I cant see a code that making that one. Try this one again.

@media only screen and (min-width: 320px) and (max-width: 1500px) {
h2.banner__heading.inline-richtext.h1, .banner__text.rte {
    color: white !important;
}
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

Found the issue, it looks like the color scheme assigned to the section is what determines the font color and overrides the custom CSS styling we added.

Had to add another color scheme with the color white as the text and it worked

6

Oh, Okay thats good then. Mostly If you cant find the codes the choice youll have is too overide it. But if you can read the code its better.