stopping the white hover color

[Howardthebrit]

Using exoplanet pro, I’m trying to make the featured services section work for me on my home page, with images instead of icons. I’m almost there but as soon as the pointer points to the image/icon a big white rectangle obliterates my (white) text, leaving just the image. I think that’s the hover color, but I can’t find a way to set that in the theme. I’d like to switch that off or make it transparent or something. I played around with CSS with this

.featured-icon:hover {
color: transparent;

}

but it’s not working… help!

[Andy]

It is the background of the whole of the featured service (not the icon) that changes on hover so the correct styling to use would be this:

.featured-post:hover {
    background: transparent;
}

[Howardthebrit]

Yep. That was it. You wonderful, wonderful person! I wish all tech support could be so prompt and so actually useful! Thanks!

[Howardthebrit]

…spoke too soon. Small screens still see the white boxes…

That css snippet only seems to apply to desktop browser, white boxes are appearing on android, iphone, and ipad

[Howardthebrit]

It seems to work with:

@media screen and (max-width: 2000px) {
.featured-post {
background: transparent;
}
}

but that feels really clunky setting 2000 to be a catch-all.

[Andy]

This should work

@media screen and (max-width: 768px) {
    .featured-post {
        background: transparent;
    }
}

[Author]

Posts