Submit Button Custom Image for Retina Displays

  • Profile Image
    makersbootcamp
    Asked on August 08, 2017 at 11:05 PM

    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

     

     

  • Profile Image
    selenhaysal
    Answered on August 09, 2017 at 03:11 AM

    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.

  • Profile Image
    Charlie
    Answered on August 09, 2017 at 04:26 AM

    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. 

  • Profile Image
    makersbootcamp
    Answered on August 11, 2017 at 02:08 AM

    Sweet. 

     

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

     

     

  • Profile Image
    Charlie
    Answered on August 11, 2017 at 03:13 AM

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

    Thank you.