Mobile view: Re-Captcha on mini-registration is too wide
By Andrew on Wednesday, 29 July 2015
Posted in Technical Issues
Likes 0
Views 432
Votes 0
We enabled the recaptcha on the mini registration. However, it does not fit the width of a mobile screen. It seems to be too wide.

Is it responsive or is there a setting we could adjust for this?

see attached image...
Hello Andrew,

Can you insert css codes below into your custom stylesheets

<!-- Scale down recaptcha in narrow view -->

@media (max-width: 369px) {

[data-field-recaptcha] {transform:scale(0.86);transform-origin:0;-webkit-transform:scale(0.86);transform:scale(0.86);-webkit-transform-origin:0 0;transform-origin:0 0;}

}
Chang
·
Wednesday, 29 July 2015 13:57
·
0 Likes
·
0 Votes
·
0 Comments
·
Hey Andrew,

I am sorry that delay of this reply,

I have tried view your site in my MI4 phone browser, it seems work fine for me.

May i know what is your current phone model view on it?
Arlex Wong
·
Wednesday, 29 July 2015 12:55
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks... We are using iPhone 4 for testing. This is still not working. The recaptcha width is still as it was before.
Andrew
·
Wednesday, 29 July 2015 14:54
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Andrew,

Can I know where you insert the css codes? And you will need to clear the cache on server-side and client-side after you applied the codes.
Chang
·
Wednesday, 29 July 2015 17:50
·
0 Likes
·
0 Votes
·
0 Comments
·
I added them where we always add the CSS overrides, in our template overrides. Cache has been disabled and cleared.
Andrew
·
Wednesday, 29 July 2015 19:27
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Andrew,

Seem like there is a bug about the templates, it will convert the symbol to html code http://screencast.com/t/M32Ed9U4I7h, hence just remove this codes from the template.

Remove this codes:
 <!-- Scale down recaptcha in narrow view -->
Chang
·
Wednesday, 29 July 2015 19:46
·
0 Likes
·
0 Votes
·
0 Comments
·
strange... Anyway, thanks a million!!!! That solved it! Tested and it is working great on mobile. I recommend that you add it to next minor update.
Andrew
·
Wednesday, 29 July 2015 20:00
·
0 Likes
·
0 Votes
·
0 Comments
·
No problem, the fixed will probably be added to the next release.
Chang
·
Wednesday, 29 July 2015 20:08
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post