React JS Button not displaying on iphones-CodePudding

I made a website on reactjs but the problem is that it is working fine on all devices except iphones,at the landing page, the begin button is not displaying on iphones.

It is working fine when I check it on browser responsive mode, but when I open it on an iphone the begin button is not displaying, I am still able to click on it but it is not displaying, I can see a mild button shadow and that's all

Link to the website :

Landing.js


import React from 'react';
import logo from './logo.png';

import {Link} from 'react-router-dom';

import './Landing.css';

function Landing()
{
    return (
        <>

        <div id="logo">
            <img src={logo} alt="logo"/>
        </div>
        <div >
            <Link id="begin" to ="/Home"><button id="button">Begin</button></Link>
        </div>

        </>
    );
}


export default Landing;

Landind.css


@keyframes transitionHome {

    from{opacity: 0;}
    to{opacity:1};
    
}

#logo{
    width:100vw;
    display:flex;
    justify-content: center;
    margin-top:20vh;
    animation-name: transitionHome;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

#logo img{
    width:30vh;
    height:30vh;
    transform: scale(0.5);

    animation-name:spinScale;
    animation-duration: 1s;
    animation-fill-mode: backwards;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

#begin {
    width:100vw;
    display:flex;
    flex-direction:row;
    justify-content: center;
    margin-top:10vh;
    animation-name: transitionHome;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

#begin  #button{
    color:rgb(0, 82, 85);
    position:absolute;
    background-color: #3db5b5da !important;
    font-size: 2.5vh;
    font-weight: 400;
    padding:1vh;
    width:15vh;
    border-radius: 25px;
    border:none;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    box-shadow: 3px 3px 3px 5px rgba(0, 0, 0, 0.082);
    animation-name: transitionHome;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    -webkit-appearance: none;
}

#begin  #button:hover{
    cursor:pointer;
    background-color: rgba(25, 167, 155);
    color:rgb(255, 255, 255);
    animation-name: transitionHome;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}



@keyframes spinScale {

    from{
        transform: scale(0.8) rotate(0deg);
    }

    to{
        transform: scale(1) rotate(360deg);
    }
    
}

CodePudding user response：

Your #begin has flex-direction: row which could be set to column other flex tweaks for mobile.

#begin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 2rem;
    align-items: center;
    }