Parallax home page section one text color

[MaryC]

Hi all!

I've changed the text that lives in the first homepage section. It's fine on the desktop now, but on the phone, the second line (not the title) gets lost in the image. Is there a way to have it display only for phones/pads in white instead of black? (If it's white on the regular, desktop version, it will be lost in the image. Silly me for liking that sky...)

And if so, can someone clue this newbie in to exactly how to do that?

Thanks!

http://mcahalane.com

[Pixel Frau]

Look for this section in style.css:

/*
Media Queries
---------------------------------------------------------------------------------------------------- */

You'll see a bunch of media queries like this: @media only screen and (max-width: 1140px). Any CSS within that media query will apply only to that screen size (or smaller).

Find the media query with the max-width you want to have the white text. @media only screen and (max-width: 768px) would be good as it includes iPads (portrait) and smaller. Then add this CSS:

.home-section-1,
.home-section-1 .widget-title {
color: #fff;
}

[MaryC]

Julia, thank you so much! I still hold my breath every time I try something. You made that very easy. I really appreciate it.

Is there a way to leave the title in black, and have the second line in white? (Or would that just look wrong?)

Right now, they're changed to both white, which is miles better for "How can I help you?" But a little tricky for the "Welcome to Hands-On Fundraising" part.

[MaryC]

Nevermind! I guessed and got it right: widget-text

Thank you!

[Pixel Frau]

Yep, that's it exactly. 🙂

[Author]

Posts