1

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?

mr javad
  • 163
  • 2
  • 13

3 Answers3

1

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>
Shammi Singh
  • 369
  • 1
  • 4
  • Thanks for your answer; I use a way like this.document.getElementsByTagName('iframe')[2].parentElement.parentElement.setAttribute('id', 'g-main'); – mr javad Aug 31 '22 at 10:39
1

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.

Daniel Brunet
  • 11
  • 2
0

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.

Rahul Mohanty
  • 342
  • 3
  • 9