Form Captcha part not showing entire picture in mobile browser

I am still having a problem with the Captcha part not showing the entire picture and reload, audio, and question mark.

I would like it to show like the image on right, not how it is currently showing on the left {see image}.

Page URL:
http://mva86.weebly.com/get-a-quote.html

Could you please try adding the following CSS code to your jotform?

table#recaptcha_table {
    max-width: 100%;
}
tr > td.recaptcha_image_cell {
    max-width: 70%;
}
#recaptcha_image > img {
    max-width: 100%;
}
div#recaptcha_image {
    float: left;
    max-width: 100%;
}
table#recaptcha_table td {
    float: left;
}

You can see how to do that here: Inject Custom CSS Codes

Do let us know how it goes.

Hi Ben:

Thank you for your response, but that code did not work.

I added it both inside and outside of the previous code and they both did not work.

(1) outside

.form-all {margin-left: 0; margin-right: 0; margin-top: -28px;}@media screen and (max-width:480px){
.form-all{
width:80% !important;
}
.form-line-column, .form-line {
width: 100% !important;
box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
}
.form-radio-item label, .form-checkbox-item label {
white-space:normal !important;
}
.form-textarea{
max-width:100% !important;
width:60% !important;
}
label{
width:90% !important;
}
}
table#recaptcha_table {
max-width: 100%;
}
tr > td.recaptcha_image_cell {
max-width: 70%;
}
#recaptcha_image > img {
max-width: 100%;
}
div#recaptcha_image {
float: left;
max-width: 100%;
}
table#recaptcha_table td {
float: left;
}

(2) inside [current]

.form-all {margin-left: 0; margin-right: 0; margin-top: -28px;}@media screen and (max-width:480px){
.form-all{
width:80% !important;
}
.form-line-column, .form-line {
width: 100% !important;
box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
}
.form-radio-item label, .form-checkbox-item label {
white-space:normal !important;
}
.form-textarea{
max-width:100% !important;
width:60% !important;
}
label{
width:90% !important;
}
table#recaptcha_table {
max-width: 100%;
}
tr > td.recaptcha_image_cell {
max-width: 70%;
}
#recaptcha_image > img {
max-width: 100%;
}
div#recaptcha_image {
float: left;
max-width: 100%;
}
table#recaptcha_table td {
float: left;
}
}

I still get it like the left image, I would like it to look like the right image.  How would the code be entered, inside or outside of previous code?

Page URL:
http://mva86.weebly.com/get-a-quote.html

It should actually look like the right image, but I see the error in the CSS code that you have posted back to me (in both versions).

I removed this (red) from your jotform:

.form-all {margin-left: 0; margin-right: 0; margin-top: -28px;}@media screen and (max-width:480px){
.form-all{
width:80% !important;
}
.form-line-column, .form-line {
width: 100% !important;
box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
}
.form-radio-item label, .form-checkbox-item label {
white-space:normal !important;
}
.form-textarea{
max-width:100% !important;
width:60% !important;
}
label{
width:90% !important;
}
table#recaptcha_table {
max-width: 100%;
width:60% !important;
}
tr > td.recaptcha_image_cell {
max-width: 70%;
}
#recaptcha_image > img {
max-width: 100%;
width:60% !important;
}
div#recaptcha_image {
float: left;
max-width: 100%;
width:60% !important;
}
table#recaptcha_table td {
float: left;
}
}#recaptcha_response_field {
    max-width: 80%;
}

Please note that the bracket } was an error in CSS and that the rest of the red code was making the widget not fill out properly.

Since I pasted the code to your CSS field I am now seeing it looking nice on your website, but do let us know if you have any issues and we would be happy to look into it.

Hi Ben:

Thanks for the response.  Could you check my CSS code I was working on it and your response and my code did not match.  It not looking correct.

Thanks again.

Page URL:
http://mva86.weebly.com/get-a-quote.html

I see.

This is the code that I have added to your jotform:

.form-all {margin-left: 0; margin-right: 0; margin-top: -28px;}@media screen and (max-width:480px){
.form-all{
width:80% !important;
}
.form-line-column, .form-line {
width: 100% !important;
box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
}
.form-radio-item label, .form-checkbox-item label {
white-space:normal !important;
}
.form-textarea{
max-width:100% !important;
width:60% !important;
}
label{
width:90% !important;
}
/* ------------------ */
/* recaptcha CSS code START */
/* ------------------ */
table#recaptcha_table {
max-width: 100%;
}
tr > td.recaptcha_image_cell {
max-width: 70%;
}
#recaptcha_image > img {
max-width: 100%;
}
div#recaptcha_image {
float: left;
max-width: 100%;
}
table#recaptcha_table td {
float: left;
}
#recaptcha_response_field {
    max-width: 80%;
}
/* ------------------ */
/* recaptcha CSS code END */
/* ------------------ */

This is the code that you currently have:

.form-all {margin-left: 0; margin-right: 0; margin-top: -28px;}@media screen and (max-width:480px){
.form-all{
width:80% !important;
}
.form-line-column, .form-line {
width: 100% !important;
box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
}
.form-radio-item label, .form-checkbox-item label {
white-space:normal !important;
}
.form-textarea{
max-width:100% !important;
width:60% !important;
}
label{
width:90% !important;
}
}
/* ------------------ */
/* recaptcha CSS code */
/* ------------------ */
table#recaptcha_table {
max-width: 100%;
}
tr > td.recaptcha_image_cell {
max-width: 70%;
}
#recaptcha_image > img {
max-width: 100%;
}
div#recaptcha_image {
float: left !important;
max-width: 100%;
width:80% !important;
}
table#recaptcha_table td {
float: left !important;
}
#recaptcha_reload#recaptcha_reload_btn#recaptcha_switch_audio#recaptcha_switch_audio_btn#recaptcha_whatsthis_btn#recaptcha_whatsthis{
float: left !important;
}
#recaptcha_response_field.recaptcha_input_area#recaptcha_privacy{
max-width: 100%;
width:60% !important;
}

I would suggest leaving only my code to see how it looks. To do that remove all code from the style box and add the code above into it.

I see that you have understanding of how to get elements and their identifiers, but I would like to let you know of a rule when creating CSS Rules.

#recaptcha_reload#recaptcha_reload_btn#recaptcha_switch_audio#recaptcha_switch_audio_btn#recaptcha_whatsthis_btn#recaptcha_whatsthis

This is read as:

"Element with ID 'recaptcha_reload' and ID 'recaptcha_reload_btn' and ID 'recaptcha_switch_audio' and ID 'recaptcha_switch_audio_btn' and ID 'recaptcha_whatsthis_btn' and ID 'recaptcha_whatsthis' should get following CSS code applied to it:"

Since one element can have only one ID and these are IDs of several HTML elements this CSS will result in CSS error and will get dropped out or cause an issue where all the rest of CSS code will not be read.

While we can not do that with IDs we can do that with classes, like you did here - of course without the last part:

#recaptcha_response_field.recaptcha_input_area#recaptcha_privacy

This would be possible, but it would be a valid CSS rule only if the element has that ID and has that class:

"Element with ID 'recaptcha_response_field' and class 'recaptcha_input_area' should get following CSS code applied to it:"

I hope that you will not mind the last segment, just wanted to help you with what you are doing so that you can do it even better :)

Hello rocker93rock,

I'm sorry for the trouble caused to you.

I did check your form in my iPhone 4S device and the fields seems to be displayed correctly. Please check the screenshot below:

I am not sure why it is not working for you in iPod Touch. I could not find any simulator for iPOD Touch but if it is working in my iPhone 4S device, it should work fine in iPOD Touch 4 as well because the screen size of both the devices are same "3.5-inch".

I have cleared your form cache. Can you please test your form again and get back to us if the issue persists.

Thank you!

Thanks for the response, ashwin_d

Screenshot from my iPod touch 4:

Test device:  iPod Touch 4 & iOS

Page URL:
http://mva86.weebly.com/get-a-quote.html

Thank you for the screenshot.

When I am inspecting your jotform I am again seeing additional styles being added to it which change the style that I have given above.

For example this one:

div#recaptcha_image {
    float: left;
    max-width: 100%;
    width: 70% !important;
}

The width: 70% !important; makes the image appear smaller than the field it is in, so it seems to be OK, while in reality an invisible part is pushing the other styles away.

For that reason it should be:

div#recaptcha_image {
    float: left;
    max-width: 100%;
}

What should be done instead is to change recaptcha_image_cell value, for example, we can lower the size to see if it would fit your iPad then like so:

tr > td.recaptcha_image_cell {
    max-width: 60%;
}

This means that your re-captcha must look like this:

/* ------------------ */
/* recaptcha CSS code START */
/* ------------------ */
table#recaptcha_table {
max-width: 100%;
}
tr > td.recaptcha_image_cell {
max-width: 60%;
}
#recaptcha_image > img {
max-width: 100%;
}
div#recaptcha_image {
float: left;
max-width: 100%;
}
table#recaptcha_table td {
float: left;
}
#recaptcha_response_field {
    max-width: 80%;
}
/* ------------------ */
/* recaptcha CSS code END */
/* ------------------ */

so remove all other styles related to it and it should work for you. Do give it a few moments if iPad has its own cache for browser pages, but the change should be shown shortly.

Thanks Ben for the response.

I got the reload, audio, and question mark in view {see below image},

but the Privacy & Terms are not showing.  I would like it to look similar to the below image:

How to get it to look similar?

Test device:  iPod Touch 4 & iOS

Page URL:
http://mva86.weebly.com/get-a-quote.html