2

If you open the Codepen on a desktop it works fine, even when you change the browser width. If you open it on mobile, the text disappears. No clue what's happening here, thanks in advance for help!

Codepen for reference: https://codepen.io/hanwhite/pen/JjpWZqG

    <div class="enter_button_docked">
        <div class="enter_button_bg">
            <div class="enter_button_bg2">
                <button class="enter_button" >This is a button</button>
            </div>
        </div>
    </div>

    <style>

    .enter_button_docked {
        display: block;
        position: fixed;
        width: 100%;
        bottom: 50px;
        left: 0;
        display: flex;
        height: 90px;
        justify-content: center;
        align-items: center;
        z-index: 10;
    }

    .enter_button_bg {
        width: 90%;
        padding: 3px;
        border-radius: 8px;
        background: linear-gradient(to bottom, #e82ea9, #0afff0);
    }

    .enter_button_bg2 {
        background-color: white;
        border-radius: 8px;
    }

    .enter_button {
        position: relative;
        text-transform: uppercase;
        font-weight: 900;
        font-size: 30px;
        width: 100%;
        margin: 8px 0px;
        letter-spacing: 2px;
        border: none;
        background: -webkit-linear-gradient(#e82ea9, #0afff0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    </style>
Hannah White
  • 31
  • 2
  • working fine in my phone. you can try to set `color: transparent` in ` .enter_button` class – rootShiv May 18 '22 at 04:25
  • If it's Safari that is giving the problem, check these answers to see if they help: https://stackoverflow.com/questions/32084460/safari-doesnt-render-css-gradient-text Also check in caniuse.com to make sure you are using -webkit- or not on the various properties as required by Safari. – A Haworth May 18 '22 at 06:51

0 Answers0