reactjsbuttoninputreact-routersmartphone

React website buttons and inputs don't work on smartphone

It is a simple website:
https://www.tradecalc.eu
The website works properly in a desktop browser. But it doesn't work properly on smartphones (only works in "computer mode"). Not working all "buttons" and "inputs". There are no errors in the browser console. At least I didn't notice any of these. The website is built with:

<input
    id="price"
    name="price"
    type="number"
    step="0.01"
    min="0.1"
    className="form-control"
    autoFocus
    required
    onChange={e => setPrice(e.target.value)} />

<input
    id="percent"
    name="percent"
    type="number"
    min="0"
    className="form-control"
    required
    onChange={e => setPercent(e.target.value)} />

<select
    name="currency"
    id="currency"
    className="form-control"
    onChange={e => setCurrency(e.target.value)}>
    {currencyList.map(({ label, value }) => (
       <option key={value} value={value}>
         {label}
       </option>
    ))}
</select>

The form "buttons":

<button type="submit" className="btn btn-secondary mr-2">Count</button>
<button type="reset" className="btn btn-outline-secondary" onClick={() => setCount(0)}>Reset</button>

The rest of the "buttons":

<Link type="button" className="btn btn-secondary btn-sm" to="/">
   Back to Trade Calc
</Link>

<a href="https://www.linkedin.com/in/" target="_blank" rel="noreferrer">
   <img src={linkedin} alt="LinkedIn" />
</a>

<Link style={{ color: "red" }} to="/donation">
   Make a Donation
</Link>

<Link style={{ color: "black" }} to="/privacy">
   Privacy & Cookies Policy
</Link>

If you need more code, please let me know.

Solution

  • Nothing wrong with JS but CSS/Markup. Your Cookie banner is overlapping the form. If you try Tab(from keyboard) to navigate to the next tab you see it will work for you, but since the container react-cookienotice-* is lying over the top of your form so you won't be able to enter values in the input fields.

    Cookie Banner