I created a React PWA using the PWA template and using MaterialUI
npx create-react-app my-pwa –template cra-template-pwa-typescript
But on mobile devices in Chrome Dev the TextFields are touching the sides.
I’ve tried the suggestions on line and using copilot.
One suggestion was to add the following style to the containing div.
Here’s the css
@media (max-width: 600px) {
.loginFormContainer {
background-image: url('./../../assets/images/login-image.jpeg'); /* Adjust the path as needed */
background-size: cover;
background-position: center;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.formWrapper {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
}
}
And here’s a Stack post I’ve looked at but it doesn’t say in which file to make the change
Separated Design between Desktop and Mobile in React.js PWA
I simply want the same UI experience on a browser and on mobile devices but none of the recommended suggestions from CoPilot, Stack or Google has worked.
Here’s the actual tsx
return (
<div className={styles.loginFormContainer}>
<form
onSubmit={handleSubmit(onSubmit)}
noValidate
>
<div>
<TextField
required
data-testid="email"
type="text"
id="email"
label="Email"
style={{ width: 400 }}
placeholder={EMAIL_PLACEHOLDER}
{...register("email", {
pattern: {
value:
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
message: EMAIL_INVALID,
},
required: {
value: true,
message: EMAIL_REQUIRED,
},
})}
sx={{
backgroundColor: 'white',
}}
/>
<p className="error" data-testid="emailErr">
{errors.email?.message}
</p>
</div>
<div>
<TextField
data-testid="password"
type="password"
id="password"
required
label="Password"
style={{ width: 400 }}
placeholder={PASSWORD_PLACEHOLDER}
{...register("password", {
required: {
value: true,
message: PASSWORD_REQUIRED,
},
minLength: {
value: 10,
message: PASSWORD_VALIDATION,
},
})}
sx={{
backgroundColor: 'white',
}}
/>
<p className="error" data-testid="passErr">{errors.password?.message}</p>
</div>
<div>
<p style={{ color: 'white' }}>
Don't have an account? <Link to="/Register">Register here</Link>
</p>
</div>
<div className="w-100 text-center mt-2">
<p style={{ color: 'white' }}>
Forgot your password? click here to <Link to="/reset">Reset</Link>
</p>
</div>
<Button type="submit" data-testid="login-button" variant="contained">
Submit
</Button>
</form>
</div>
);
What’s the correct way to do this?
Any help would be appreciated.
You need to sign in to view this answers