0

Mi problema es el el login de mi web, que sin agregar el widget de recaptcha se ve así (solo pasa en dispositivos moviles el problema): introducir la descripción de la imagen aquí

Y cuando agrego el recaptcha se ve así:

introducir la descripción de la imagen aquí

¿Qué debo modificar? QUE NO SEA CAMBIAR A COMPACT DENTRO DEL DIV G-RECAPTCHA PORQUE ES VISUALMENTE FEO. Estoy usando un framework basado en Bootstrap 5.

Mi código:

<!--begin::Main-->
    <div class="d-flex flex-column flex-root">
      <!--begin::Authentication - Sign-in -->
      <div class="d-flex flex-column flex-column-fluid bgi-position-y-bottom position-x-center bgi-no-repeat bgi-size-contain bgi-attachment-fixed" style="background-size1: 100% 50%; background-image: url(assets/media/misc/outdoor.png)">
        <!--begin::Content-->
        <div class="d-flex flex-center flex-column flex-column-fluid p-10 pb-lg-20">
          <!--begin::Logo-->
          <a href="index.html" class="mb-12">
            <img alt="Logo" src="assets/media/logos/logo-2.svg" class="h-45px" />
          </a>
          <!--end::Logo-->
          <!--begin::Wrapper-->
          <div class="w-lg-500px bg-white rounded shadow-sm p-10 p-lg-15 mx-auto">
            <!--begin::Form-->
            <form class="form w-100" novalidate="novalidate" id="kt_sign_in_form" action="" method="POST">
              <!--begin::Heading-->
              <div class="text-center mb-10">
                <!--begin::Title-->
                <h1 class="text-dark mb-3">Welcome to <?php echo($settings->getName()) ?></h1>
                <!--end::Title-->
                <!--begin::Link-->
                <div class="text-gray-400 fw-bold fs-4">New Here?
                <a href="register" class="link-primary fw-bolder">Create an Account</a></div>
                <!--end::Link-->
              </div>
              <!--begin::Heading-->
              <!--begin::Input group-->
              <div class="fv-row mb-10">
                <?php echo($error); ?>
                <!--begin::Label-->
                <label class="form-label fs-6 fw-bolder text-dark">Email</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input class="form-control form-control-lg form-control-solid" type="text" name="aa" id="aa" required="" autofocus=""/>
                <!--end::Input-->
              </div>
              <!--end::Input group-->
              <!--begin::Input group-->
              <div class="fv-row mb-5">
                <!--begin::Wrapper-->
                <div class="d-flex flex-stack mb-2">
                  <!--begin::Label-->
                  <label class="form-label fw-bolder text-dark fs-6 mb-0">Password</label>
                  <!--end::Label-->
                </div>
                <!--end::Wrapper-->
                <!--begin::Input-->
                <input class="form-control form-control-lg form-control-solid" type="password" name="ss" id="ss" required="" />
                <!--end::Input-->
              </div>
              <!--end::Input group-->
              <!--begin::Actions-->
              <div class="text-center">
  <div class="g-recaptcha" data-sitekey="<?php echo $CAPTCHA_KEY; ?>"></div>
</div>
              <div class="text-center">
                <!--begin::Submit button-->
                <button type="submit" id="kt_button_1" class="btn btn-lg btn-primary w-100 mb-5">
                  <span class="indicator-label">Continue</span>
                  <span class="indicator-progress">Please wait...
                  <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                </button>
                <!--end::Submit button-->
              </div>
              <!--end::Actions-->
            </form>
            <!--end::Form-->
          </div>
          <!--end::Wrapper-->
        </div>
        <!--end::Content-->
        <!--begin::Footer-->
        <div class="d-flex flex-center flex-column-auto p-10">
          <!--begin::Links-->
          <div class="d-flex align-items-center fw-bold fs-6">
            <a href="https://keenthemes.com/faqs" class="text-muted text-hover-primary px-2">About</a>
            <a href="mailto:[email protected]" class="text-muted text-hover-primary px-2">Contact</a>
            <a href="https://1.envato.market/EA4JP" class="text-muted text-hover-primary px-2">Contact Us</a>
          </div>
          <!--end::Links-->
        </div>
        <!--end::Footer-->
      </div>
      <!--end::Authentication - Sign-in-->
    </div>

Espero puedan ayudarme porque no encuentro manera de arreglarlo. Probé modificando <div class="w-lg-500px bg-white rounded shadow-sm p-10 p-lg-15 mx-auto"> quitando el mx-auto y pasando de p-10 a p-5 pero visualmente queda horrible.

También probé con algunos códigos CSS que encontré en internet para hacer responsive el widget pero tampoco me funcionó.

Muchas gracias de antemano.

1 respuesta 1

0

puedes intentar poner con CSS al captcha

.captcha{max-width: 100%;}

o 90% o 95% de cauerdo a tu gusto

2
  • acabo de intentar y no funcionó :( Commented el 14 jun. 2021 a las 16:54
  • Bueno la clase no es .captcha sino .g-recaptcha Commented el 14 jun. 2021 a las 18:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.