0

So I have this chunk of html that displays the inserted Recaptcha div wrapped with my own comment_recaptcha div:

<script src='https://www.google.com/recaptcha/api.js' async defer></script> <div class='comment_recaptcha' id='comment_recaptcha'><div class='g-recaptcha' data-sitekey='".$this->recaptcha_public_key."'></div></div>

Problem is, it looks horrible on mobile -

first one

In the picture above it could look worse, but it's not ideal at all and even that recatpcha centering I've solved by making comment_recaptcha display: grid and making the g-recaptcha class margin: auto.

comment_recaptcha's father div is #insert_element -

#insert_comment {
  margin-top: 10px;
  font-family: 'Roboto', sans-serif;
  color: #424242;
  font-size: 14px;
  background-color: #f7f7f7;
  border-radius: 3px;
  border: 1px solid #eaeaea;
  padding: 10px 20px;
  max-width: 100%;
}

But the true horror is when the window's width is less than about 365 pixels it could like that -

second third

How do I fix that so the Recaptcha fits the full width of its container instead of staying at the same size and look like it?

Gibin Ealias
  • 2,751
  • 5
  • 21
  • 39
bruce willson
  • 13
  • 6
  • 1
    Your site should have a min width, for example 320px and recaptcha should fit in that width, reduce margin/padding on each side if you need but it shouldn't cut off at 320 – Huangism Feb 12 '18 at 15:54
  • Hope this helps: https://stackoverflow.com/questions/22991938/overriding-google-recaptcha-css-to-make-it-responsive – snack_overflow Feb 12 '18 at 17:00

0 Answers0