Image added on form not centering on mobile devices

My form "body" is centered on the mobile device but the top part of the form has a banner ( from your Themes) and an image that will not center on mobile devices.  I tried searching through the forums and it talks about CSS codes, which is beyond my knowledge.  I tried the mobile " widget"  and it showed some weird drawing type in shape of a head. 

 

Thanks in advance for your help.

 

Lorie

I have cloned and tested your form and I was able to replicate mentioned issue. It seems that theme that you are using is not responsive. 

Can you maybe use some other Theme? 

Or as possible workaround, we can remove the background with this CSS code: 

.form-section:before {

    visibility : hidden!important;

}

.form-section:after {

    visibility : hidden!important;

}

[data-type=control_widget]:before {

    visibility: hidden;

}

.form-all .page-section {

    padding-top:0!important;

    margin-top:-30px!important;

}

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

You would also need to add Mobile Responsive widget to make you image responsive. 

Here is my demo form: https://form.jotform.com/63626004046953 

Feel free to test it and clone it. 

 

Hope this will help. Let us know if you need further assistance. 

Thank you for your help. I removed the theme ( sadly though) and I just re
created a banner type look on my image in Photoshop. When I upload the
image now, it is off center on the desktop view. The mobile view is fine,
but the desktop is whacked now. I played with the alignments and I erased
the code you gave me too. Not sure why I can't get both desktop and mobile
to center that image. Thanks again for any help you may have.
...

This happens because the width of the image is set to 570px and the width of your form is 590px.

Although the width of the image is smaller than the width of the form, the image will not be centered because each of your fields (including that image field) has a 36px padding on both sides. That means 570px (width of the image) + 72px (total padding on both sides of the image) = 642px which is now bigger than the form's width (590px). 

I suggest you decrease the size of the image to 518px.

Note: You will notice that when you change the width of the image to 518px its height automatically changes to 777px from 855px. If you still want to have the image height set to 855px or to your own preference, you can unlock the constrain proportion option of the size property of the image.

This should also fix any issues you're having with mobile devices. 

I hope this helps. If, in any case, you encounter any other issues, please feel free to contact us again anytime and we will be glad to help you further.

Thank you.