How to center images on Image picker widget ?

The images look more centered on the desktop and tablet views but the phone images are not centered.  Is there a CSS that I can insert that will address this issue?

Please follow these steps:

On your form builder, click on the blue form designer icon on the top right corner.  After that, click on the CSS Tab and make sure to paste your code then click on save button.

1. Inject the following custom CSS codes in your form:

@media only screen and (max-device-width: 768px) {

.custom-field-frame {

    width: 100% !important;

}

}

2. Inject the following custom CSS codes in the Image picker widget:

@media only screen and (max-device-width: 768px) {

.imageContainer.blocks {

    width: 45% !important;

}

.divimg {

    width: 150px !important;

    height: 150px !important;

}

}

Please check the GIF is shown below:

Last view on mobile:

For detailed information, please check the following guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes. 

If you have other questions or concerns, please do not hesitate to let us know.

I injected the code as shown and I still have only one column on my mobile view and it is off center.  Please advise if the CSS code needs to be in a specific section of the existing code for the form. 

Thanks

The first CSS code has to be added to the Form Designer > CSS tab.

@media only screen and (max-device-width: 768px) {

.custom-field-frame {

    width: 100% !important;

}

}

You can add the code to the bottom of existing codes.

The other CSS code has to be added to the widget's CSS tab.

@media only screen and (max-device-width: 768px) {

.imageContainer.blocks {

    width: 45% !important;

}

.divimg {

    width: 150px !important;

    height: 150px !important;

}

}

This should be the result.

Here is a demo form - https://form.jotform.com/90801903605957

Test it on an actual mobile device, not in the Preview mode. 

Thanks for helping with this.  It does work as you describe but when I embed the form into my website using embed code it doesn't work.  Also with the solution you presented is there a way to have the two columns centered on the mobile device screens

Thanks

Could you please let us know the URL of the website where you are trying to embed the Form?

I have injected CSS to center align the Image widget in the mobile

#container {
 position: relative;
 left: 10px;
}

Let us know how it goes.

Thanks.

https://consultcenter.ca/watch-clinics/

Thank you for providing us the link to the website where your form with the Image Picker widget is embedded.

Please give me some time. I'll work on a solution and I'll get back to you as soon as possible.

Apologies for any delays.

Below are the CSS codes that you need to inject to your form to meet your requirements.

@media screen and (max-device-width: 40em) {

.form-line {

    padding: 2% 1px !important;

}

.form-all {

    width: 100% !important;

}

}

How-to-Inject-Custom-CSS-Codes

And below are the CSS codes that you need to inject to the custom CSS tab of the Image Picker widget in your form.

@media screen and (max-device-width: 40em) {

.imageContainer.blocks {

    margin-right: 0px !important;

    width: 48% !important;

}

.imageContainer.blocks:nth-child(odd) {

    margin-right: 4% !important;

}

.imageContainer.blocks:nth-child(even) {

    float: right;

}

}

How-to-Inject-CSS-Codes-to-Widgets

Please test the result with an actual mobile device. If you encounter any issues, please feel free to let us know and give us more details such as a screenshot that shows the issue.

How-to-Post-Screenshots-to-Our-Support-Forum