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):
Y cuando agrego el recaptcha se ve así:
¿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.