编辑Google Recaptcha CSS以使其具有响应性

Question

所以我有一大块html显示插入的Recaptcha div包裹着我自己的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>

问题是，它在手机上看起来很糟糕 -

在上面的图片中，它可能看起来更糟糕，但它根本不理想，即使是通过制作comment_recaptcha display：grid并制作g-recaptcha类边距：auto来解决重新定位问题。

comment_recaptcha的父亲div是#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%;
}

但真正的恐怖是当窗口的宽度小于约365像素时它可能是这样 -

如何解决这个问题，以便Recaptcha适合其容器的整个宽度，而不是保持相同的尺寸，看起来像它？