I have been working on a login screen and encountered a problem with the layout on smaller devices. Despite centering all the content perfectly on my computer's browser, when I inspect it using developer tools for smaller devices, everything shifts to the left of the screen. Below is the code snippet for the page:
<TypeUser/>
<div className="center">
<div
className="w-100 align-self-start p-5" style={{ maxWidth: 700 }}>
<h1
className="text-center text-light">
Register / Log in
</h1>
<p className="text-center pb-3 mb-3 text-light">
Discover the best events in your city.
</p>
<form onSubmit={requestOTP}>
<div className="row">
<div className="col-12">
<div className="position-relative mb-4">
<label htmlFor="phoneNumberInput" className="form-label fs-base text-light">
Log in with your phone number
</label>
<input
type="tel"
id="phoneNumberInput"
value={phoneNumber}
onChange={(event) => {
setPhoneNumber(event.target.value)
setExpandForm(false)
setErrorMessage(null)
}}
className="form-control form-control-lg"
placeholder='Mobile phone number'
/>
</div>
{ expandForm === true
? <>
<div className="position-relative mb-4">
<label htmlFor="otpInput" className="form-label fs-base text-light">Verification code</label>
<input
type="number"
id="otpInput"
value={OTP}
className="form-control form-control-lg"
placeholder='Verification code'
onChange={(event) => {
setOTP(event.target.value)
}}
/>
</div>
<button
type='button'
disabled={OTP.length <= 5}
className="btn btn-lg btn-primary btn-block mb-3"
onClick={(event) => {
setErrorMessage(null)
verifyOTP(event)
}}
>
{`${isLoading ? 'Validating...' : 'Validate code'}`}
</button>
</>
: null
}
<AlertErrorForm messageError={errorMessage} />
{
expandForm === false
? <button type="submit" disabled={phoneNumber.length <= 12} className="btn btn-lg btn-primary btn-block mb-3">Request code</button>
: null
}
<div id="recaptcha-container"></div>
</div>
</div>
</form>
</div>
</div>
</>
)
}
In addition, here is the CSS code that I utilized to center everything in the browser view:
.center{
padding-top: 8%;
padding-left: 25%;
text-align: center;
}