CODEWITHSUNDEEP
cssresponsive-designrecaptcha
user3057514
user3057514

Reputation: 261

responsive recaptcha without image cut out

I am trying to create a responsive recaptcha. I found this good example on the internet. I tried it and it works okay, but the issue is that the words get cut off when I resize my chrome browser to the smallest size it can go as well as on iPhone. I was wondering, is it possible to make it not to cut of the words and still 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>

Upvotes: 3

Views: 2536

Answers (1)

Abbas Arif
Abbas Arif

Reputation: 390

@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 image issue.

Upvotes: 2

Related Questions