How to change the background color or text color in mobile version?

[Focused.1]

Hello and thank you in advance for any insight and help.

I am using the legacy theme.

In the mobile version the white background of the pages is not displaying so the text is hard to read. I would either like to add the white background or change the text color on the mobile version.

I am having trouble achieving this.

What would you suggest as the best way to get the desired look?

Thank you for your time!

http://www.mondashaircare.com

[Brad Dalton]

Look in your Media Queries at the end of your style.css file.

Add this CSS to your existing Media Queries and change the value for max-width: 900px to the screen width you want the CSS rule to over ride the default.

@media only screen and (max-width: 900px) {

    body {
	    background-color: red;
	    color: yellow;
	    font-family: 'Lato', sans-serif;
	    font-size: 18px;
	    font-weight: 300;
	    line-height: 1.625;
    }

}

Then you can change the values for any of the default properties in your rule.

The above example changes the background color to red and the text color to yellow when the screen width reduces below 900px

---

Tutorials for StudioPress Themes.

[Focused.1]

Thank you for your reply braddalton.

This is changing the text color only for the text that is not styled inline. Everything else is left the color that I have styled it to.

It is not changing the background color.

I have an image set as the background. The look I am going for is the same as it is seen on a desktop with the pages having a white background over the top of my background image.

Am I doing something wrong?

Thank you for your time.

[Brad Dalton]

Change the CSS to anything you like.

It's simply an example of how to change the CSS at specific screen sizes.

http://www.w3schools.com/cssref/pr_background-color.asp

---

Tutorials for StudioPress Themes.

[Author]

Posts