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:
import 'bootstrap/dist/css/bootstrap.css';
in "index.js" file.<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.
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.