Mobile landing page text contrast on image background

  • Posted in : unRovr
  • uxer55
    Participant

    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

    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

    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

    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

    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

    Hi,
    I will forward this topic to our developer and will keep you updated.
    Thanks

    ahmetsali
    Keymaster

    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
Login and Registration Log in · Register