Recaptcha Not Responsive

Hi There,

When a user books an event on a mobile phone, the recaptcha isn´t responsive - how do I make that responsive?

Thanks Karl

Hi All,

If anyone else has this issue, here is a fix - you may need to adapt it bit for your site.

Maybe Tuan or the event bookings team can add a comment here or improvement?

In your components/com_eventbooking/assets/css/custom.css file or if you experience this issue elsewhere on your site or other extensions then add the following code to their custom.css files or relevant .css file:

/*Make recaptcha responsive*/
@media (max-width: 500px) {
#recaptcha_challenge_image{
margin: 0 !important;
width: 100% !important;
}
#recaptcha_response_field
{
margin: 0 !important;
width: 100% !important;
}
#recaptcha_table.recaptchatable #recaptcha_image {
margin: 0 !important;
width: 100% !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 {

margin: 0 !important;
width: 100% !important;
background: none !important;
}


Regards,

Karl