Submit Button Custom Image for Retina Displays

  • Profile Image
    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:



  • Profile Image
    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
    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: You can test it on different mobile device as it should already be mobile responsive. 

    I hope that helps. 

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



    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
    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.