CODEWITHSUNDEEP
cssresponsiverecaptcha
mr javad
mr javad

Reputation: 183

google recaptcha v2 is not responsive in some mobiles

I'm using google recaptchav2, but on some mobiles verify button is not reachable.

google recaptcha v2

I'm sure it's because of left:161.68px on a div without any id or class.

enter image description here

How can I make it responsive?

Upvotes: 1

Views: 1610

Answers (4)

Tomoya
Tomoya

Reputation: 113

I had the exact same issue and resolved it by adding CSS like below. I believe you just need left property to fix the overflow.

@media (max-width: 575px) {
    /* selector for overflow div */
    div[style*='box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 3px;'] {
      left: 0 !important;
    }
}

Upvotes: 0

Daniel Brunet
Daniel Brunet

Reputation: 11

While not the most ideal solution, it is possible to style the recaptcha wrapper using the z-index as a unique identifier in the CSS selector, and override the position and layout to fit on a mobile device;

/* Reposition RecaptchaV2 on mobile using z-index as selector */

@media (max-width: 575px) {
  div[style*='z-index: 2000000000;'] {
    left: 0 !important;
    right: 0 !important;
    top: 1rem !important;
    padding-bottom: 2rem;
    display: flex;
    justify-content: center;
    border-radius: 12px
  }

  /* Hide the bubble arrow */
  .g-recaptcha-bubble-arrow {
    display: none !important;
  }
}

Note: Consider replacing any use of this specific z-index throughout your codebase with a different value.

Upvotes: 1

Shammi Singh
Shammi Singh

Reputation: 377

It may help you. Add class using jquery.(Can you please share the link of this page ?)

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("iframe").parents("div").addClass('g-active');
    });
    </script>

Upvotes: 1

Rahul Mohanty
Rahul Mohanty

Reputation: 342

if you dont given an id to that element then you can give a condition in js file like if width of the div element is greater than vw(viewport width)then set width according to the mobile width.otherwise give that div a height and width.

Upvotes: 0

Related Questions