Mobile landing page text contrast on image background

Posted in : unRovr
uxer55
Participant
20 March 2019 at 20:01
#58388

Hi,

Can you help me create more contrast between the text on this page and the image background? It is fine on desktop, but on mobile the white text is very difficult to read.

Image: https://imgur.com/JZY9rOQ

Thank you
serkan
Moderator
21 March 2019 at 00:50
#58410
Hi,
You can use this custom css code;
```
@media screen and (max-width: 767px) {
.cover:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background: rgb(0, 0, 0);
} }
```
Thanks
uxer55
Participant
21 March 2019 at 06:42
#58416

Hi,

Thanks for the help. However, when I put this css into my site, WordPress is warning me that there are 4 errors. I published anyway to test it, but it does not change anything. Do you mind double checking it?

Thank you

serkan
Moderator
22 March 2019 at 14:34
#58430

Hi,
When I apply the code to your Web site, the image occurs like this. The background is getting darker and white writing comes to the fore.
https://ibb.co/vwv1rw4
Thanks

uxer55
Participant
31 March 2019 at 05:38
#58536

Hi,

To me, it is still difficult to read. I didn’t notice any change, even in the picture you posted. Is it possible to make it darker?

Thanks

serkan
Moderator
31 March 2019 at 17:44
#58547

Hi,
I will forward this topic to our developer and will keep you updated.
Thanks
ahmetsali
Keymaster
2 April 2019 at 19:16
#58571
Hi, you can try this custom css code;
```
.cover:after, .card-3d-right-side:after, .card-3d-bottom-side:after, .header:before {
    opacity: .6;
}
```

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item

unRovr - Animated vCard WordPress Theme

by pixelwars