Mobile caption background on hero

[Carly Gardner]

Hi Bill,

I’m trying to get a white background behind my hero title/caption on the mobile site. I can’t seem to get it to override though. Is this the right way of trying it?

@media screen and (max-width: 767px)
.top .hero-content, .middle .hero-content, .bottom .hero-content {
background-color: #fff;
}

Thanks,

Greg

[Bill Robbins]

Hi Greg,

Great question. The media queries are a bit unusual in their syntax compared to other CSS. We don’t typically have nested styles which is what they look like.

In that snippet, it looks like the brackets for the media query itself are missing. Try using this:

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

	.top .hero-content, 
	.middle .hero-content, 
	.bottom .hero-content {
		color: #000;
		background-color: #fff;
	}

}

I added in a color to change the text color to black from the default white as well. See how that works for you and let me know if you run into any trouble.

Have a great weekend,
Bill

[Carly Gardner]

Well those brackets would help wouldn’t they. It worked, thanks as always!

[Bill Robbins]

Glad that did the trick 🙂

[Author]

Posts