I've been coding a login screen but I have a problem when inspecting my page in smaller devices, I've already centered all the content of the page and when I'm opening it in my computer's browser it looks good, but when I inspect it with the browser developer tools with a smaller device look, it shows all the way to the left of my screen. here's the code of the page:

<TypeUser/>
      <div className="center">
        <div
          className="w-100 align-self-start p-5" style={{ maxWidth: 700 }}>
          <h1
            className="text-center  text-light">
            Regístrate / Inicia sesión
          </h1>
          <p className="text-center pb-3 mb-3 text-light">
          Descubre los mejores eventos en tu ciudad.
          </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">
                    Inicia sesión con tu teléfono
                  </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='Número de teléfono móvil'
                  />
                </div>
                { expandForm === true
                  ? <>
                    <div className="position-relative mb-4">
                    <label htmlFor="otpInput" className="form-label fs-base text-light">Código de verificación</label>
                      <input
                        type="number"
                        id="otpInput"
                        value={OTP}
                        className="form-control form-control-lg"
                        placeholder='Código de verificación'
                        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 ? 'Validando...' : 'Validar código'}`}
                      </button>
                  </>
                  : null
                }
                <AlertErrorForm messageError={errorMessage} />
                {
                  expandForm === false
                    ? <button type="submit" disabled={phoneNumber.length <= 12} className="btn btn-lg btn-primary btn-block mb-3">Solicitar código</button>
                    : null
                }
                  <div id="recaptcha-container"></div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </>
  )
}

I also have this css code that I used for putting everything in the middle in a browser look:

.center{
  padding-top: 8%;
  padding-left: 25%;
  text-align: center;
}

CodePudding user response：

I was using the wrong css, the correct one is:

  .center{
  display: flex;
  align-items: center;
  justify-content: center;
  }

If you want, you can add things like padding and else.

CodePudding user response：

Maybe div size is too big. You should add a media query that changes the size of the div based on mobile/tablet portview. For example you can try adding at the end of your CSS this snippet

@media only screen and (max-width: 600px) { 
  .center {
    max-width: 200px //try your best suitted value
  }
}