[Resolved] Gradient on body only links

Home Forums Support [Resolved] Gradient on body only links

Home Forums Support Gradient on body only links

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1633576
    Dominique

    Hi,

    I applied a gradient on body only links using this selector:

    
    .inside-article a:not(.button) {
    /* Gradient CSS */
    }

    It works great the gradient applied.

    The hover color does not apply anymore so I tried this:

    
    .inside-article a:hover:not(.button){
    	color: #e5e4e2!important;
    }

    It doesn’t work. Can’t get the hover colour to apply.

    Please advise.

    #1633597
    Leo
    Staff
    Customer Support

    Hi there,

    Where can I see a link? I checked the home page and don’t see one – only seeing lots of buttons.

    Let me know πŸ™‚

    #1633600
    Dominique

    About-Us or Γ€-Propos Contact-Us or Contact Choose your language πŸ™‚

    There is more then a home page to a website πŸ˜‰

    #1633669
    Elvin
    Staff
    Customer Support

    Hi,

    Try adding this CSS.

    .inside-article a:hover:not(.button) {
        background: unset;
        -webkit-text-fill-color: unset;
        color: #e5e4e2!important;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1634052
    Dominique

    Hi,

    Worked like a charm !important not needed.

    Thanks

    #1635023
    Elvin
    Staff
    Customer Support

    Worked like a charm !important not needed.

    Agreed, I just copied the property from the existing CSS. In fact, it’s best practice to avoid using !important.

    No problem. Glad it works for you. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #1643357
    Dominique

    Hi,

    The website is now out of the sandbox and live attached to the domain name.

    First, I would like to thank the whole team for all the above and beyond help & support that was given. With your help I was able to have the website look exactly how I wanted it. The website performs phenomenally in lighthouse web.dev 100 notes on performance, accessibility, best practices & SEO!!! The load time is 1.1 to 1.3 seconds in mobile!!! I attached in private information a link to a screenshot of the results. There is no way I could of achieved those results using Elementor with Elementor Pro. The combination of Perfmatters, WP-Rocket, GeneratePress premium with GenerateBlocks is a lean mean winning one. Keep up the great work.

    Regarding gradient on links I have an issue with partial or incomplete display of the text links that was noticed on mobile only IOS devices.

    Any help to resolve the issue would be appreciated.

    #1643990
    David
    Staff
    Customer Support

    Hi there,

    thanks for the great feedback – we really appreciate it, and its great to see those page speed results !

    In your CSS Rule for adding the gradient / background clip, try adding the following property:

    -webkit-box-decoration-break: clone;

    It should stop the weird line breakage that is occurring.

    #1644031
    Dominique

    Hi,

    Never would of found that one.

    Worked like a charm.

    As always πŸ˜‰

    Thank you.

    #1644098
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.