Submit Button Custom Image for Retina Displays

Hi there,

I can't figure out the CSS to size down a custom submit button image to work well for retina displays.

My form is here: https://www.jotform.com/build/72118654882463

I have reviewed your form, and to resize the custom button you may add the following code into your CSS codes:

    transform: scale(0.5,0.5); // resizes

    -ms-transform: scale(0.5,0.5);

    -webkit-transform: scale(0.5,0.5);

    -moz-transform: scale(0.5,0.5);

    margin-left:25%!important; //centers the image

I am sending a screenshot of the applied code, please contact again for any further problems.

If the above suggestion by selenhaysal does not work, please do try the following:

1. First, remove the margin-left and text-align on the .form-buttons-wrapper:

2. Also remove the code block highlighted below. 

3. After that, simply inject this custom CSS code in your form:

#input_2 > img {

  width: 100% !important;

}

The alignment of the button and the width of the parent element should not be a problem as they are already defined. You just need to set the image button to follow the width of the parent element button. Here's a cloned test form that I have: https://form.jotformpro.com/72201529026952. You can test it on different mobile device as it should already be mobile responsive. 

I hope that helps. 

Sweet. 

I see the above sample is kind of a back and forth dance while the lower works in most cases. Thanks so much!

Glad to hear that the suggestion works. If you need any help again, feel free to drop by here in the forum.

Thank you.