reCapcha of Google look bad, not adjusted correctly...

dcstudios24

Hi. The reCapcha of Google continues to look bad, not adjusted correctly to the screens on the mobile, too small on desktop and with the word "Cap" stuck and superimposed on the box, as evidenced on the screen.
*attached image.
greetings thank you
Michael

aman204

dcstudios24 Would suggest to kindly post for this in reCaptcha support forum and ask how to change view output to change div elements e.t.c henceforth giving flexibility to change the element styling with ease.

The specific element change as desired by you isnt being possible due to inline parent CSS adding width as shown in screenshot which has been added to parent div henceforth superseding the inner DIVs.

Or, You may try use another captcha extension from JED directory which allows more flexibility in terms of styling changes

dcstudios24

It looks good with all the templates used, for example: gavickpro, only with this template does not fit correctly ... aman204

aman204

dcstudios24 Upon reviewing closely and comparing specific CSS rule-sets for specific element with both Shape5 and default template, Could find that you have added some CSS which is acting detrimental instead of having the element being shown fine in default stage.

You may either remove or comment out this CSS or increase the value accordingly around line 277 in custom.css:

#jform_captcha {
    transform: scale(0.77);
    -webkit-transform: scale(0.77);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}

dcstudios24

Hi, thank you for you answer. That code is not mine, it is really a code that you generated through another ticket of the forum to try to solve the same problem without solution once. In practice you suggested me to insert the code and now it tells me that it is the code that causes the error? Greetings, thanks. Good 2019. Michael. aman204

aman204

dcstudios24 That code is not mine, it is really a code that you generated through another ticket of the forum to try to solve the same problem without solution once.

Can you kindly redirect to the forum post where the same could have been suggested. As far as I remember, The specific CSS has not been suggested while reviewing the forum posts in relation to specific site

Nevertheless, You may please follow the suggestion posted in order to get the result as envisaged

dcstudios24

https://www.joomlart.com/forums/d/18003-recaptcha-v2-responsive/7 aman204

saguaros
22 days ago
dcstudios24
Try to add margin-left for above code:

#jform_captcha {
transform: scale(0.77);
-webkit-transform: scale(0.77);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
margin-left: -10px;
}
It looks fine on my mobile device:

aman204

dcstudios24 Thanks for posting the forum thread in reference. Had been suggested by colleague. You may remove the specific CSS as suggested

dcstudios24

Of anything, the important thing is to be able to solve the problem, I try to eliminate it to see if it works now, thanks, regards.

Michael aman204

dcstudios24

Hello, I confirm that I have deleted the CSS code, but now the Capcha is completely cut in the mobiles.

greetings thank you
Michael aman204

aman204

dcstudios24 but now the Capcha is completely cut in the mobiles.

You may try add this to custom.css file to circumvent around certain breakpoint and change values accordingly :

@media only screen and (min-device-width: 480px) and (max-device-width: 550px){.rc-anchor-normal .rc-anchor-checkbox-label{width: 112px !important;}.rc-anchor-normal .rc-anchor-content{width: 166px !important;}.rc-anchor-normal .rc-anchor-pt{margin:2px 53px 0 0 !important;}}

dcstudios24

Hi, thanks for your spare. I have tried, changed values, erased the cache, but nothing changes. aman204

pavit

Hi dcstudios24

Please share your website super user account we will test code directly on your website.

Take a look HERE Point-5 to see how to keep your info Private.

Regards

dcstudios24

WITH THIS TICKET I SEND MY CREDENTIALS OF ACCESS... pavit

https://www.joomlart.com/forums/d/17448-with-this-ticket-i-send-my-credentials-of-access

pavit

dcstudios24

Added to your custom.css

.accordion-inner {
    padding:9px 1px;
  }

@media only screen and (max-width: 480px){
.form-horizontal .control-group {
    margin-top: 20px;
}
  .accordion-inner {
    padding:9px 1px;
  }
}

Regards

dcstudios24

Good morning, thank you for your response. I confirm that it does not work for me...
The interested pages are the following:
https: // / component / users /? view = login
https: ///password-reset.html
https: // /registration-form.html?view=remind
https: //registration-form.html
https: // /contact-us.html
In each and every one of these pages there are the following problems in mobile devices: texts cut to the right, fields cut to the right, capcha cut to the right.
greetings thank you.
Michael. pavit

pavit

Hi dcstudios24

Tested all the pages with an iPhone-X and all of them has captcha correctly aligned, visible, and working.

Regards

dcstudios24

Huawei P20 Pro 2018, Android. It does not work... pavit

saguaros

dcstudios24
Here is on my mobile