Geek asks and answers

Responsive recaptcha without cropped image

I am trying to create a responsive recaptcha. I found this good example on the Internet. I tried this and everything works fine, but the problem is that the words are truncated when I resize my Chrome browser to the smallest size it can do, as well as on the iPhone. I was wondering, is it possible to do this not to cut out words and make the text readable?

<style>
@media (max-width: 444px) {

    .recaptchatable #recaptcha_image {
          margin: 0 !important;
          width: 200px !important;
    }

   .recaptchatable .recaptcha_r1_c1, .recaptchatable .recaptcha_r3_c1, .recaptchatable .recaptcha_r3_c2, .recaptchatable .recaptcha_r7_c1, .recaptchatable .recaptcha_r8_c1, .recaptchatable .recaptcha_r3_c3, .recaptchatable .recaptcha_r2_c1, .recaptchatable .recaptcha_r4_c1, .recaptchatable .recaptcha_r4_c2, .recaptchatable .recaptcha_r4_c4, .recaptchatable .recaptcha_image_cell {

          background: none !important;
    }

}
</style>
+3
source share
1 answer
@media (max-width: 444px) {
    .recaptchatable #recaptcha_image {
        margin: 0 !important;
        width: 200px !important;
        float:left !important;
    }
    .recaptchatable #recaptcha_image img {
        max-width:100%;
    }
    .recaptchatable .recaptcha_r1_c1, .recaptchatable .recaptcha_r3_c1, .recaptchatable .recaptcha_r3_c2, .recaptchatable .recaptcha_r7_c1, .recaptchatable .recaptcha_r8_c1, .recaptchatable .recaptcha_r3_c3, .recaptchatable .recaptcha_r2_c1, .recaptchatable .recaptcha_r4_c1, .recaptchatable .recaptcha_r4_c2, .recaptchatable .recaptcha_r4_c4, .recaptchatable .recaptcha_image_cell, .recaptchatable .recaptcha_r2_c2 {
        background: none !important;
    }
}

This should fix the image problem.

+2
source

More articles:


All Articles