Media Query Help

[ranchhouse]

Hi,

I was able to mostly figure this out, but am having an issue with one part. So on desktop, we have food photo with a 50% white overlay on the upper layer. On mobile, I want to hide replace the background image with a chalkboard texture. I got that part figured out, but what I’m having trouble with, is hiding the white background overlay that is on the upper layer. Perhaps I’m not using the correct selector??

@media (max-width: 420px) {
#quote-section .x-bg-layer-lower-image {
background-image: url(“http://texasbestproteins.rhdproofs.com/wp-content/uploads/2018/07/chalkboard-inside.jpg”) !important;
}
#quote-section .x-bg-layer-upper-image {
background-color: rgba(255, 255, 255, 0) !important;
}
#chalkboard .x-bg-layer-lower-image {
display: none !important;
}
.quote-gap {
display: none !important;
}
}

[friech]

Hi Sarah,

Thank you for writing in, more likely this is the wrong selector #quote-section .x-bg-layer-upper-image on the second block of your css code.

Your upper background is a color, not an image. Please update that selector. Try updating that to #quote-section .x-bg-layer-upper-color

Finding selector using the Chrome browser Developer Toolbar

If nothing works, please provide us the direct page URL so we can take a closer look.

Cheers!