Is there a way to make images within a text field responsive?

  • Profile Image
    riverinatradies
    Asked on March 05, 2015 at 11:24 PM

    The following form has a paypal image within a text field that looks fine when viewed on a desktop but as the screen size gets smaller, as the image doesn't shrink this text field looks a bit messy. On an iphone 4 or 5 there's just a tiny bit of text (1 or 2 words) next to the image which isn't ideal. Is there any custom CSS I can inject to make this look better on smaller reoslutions?

  • Profile Image
    Ben
    Answered on March 06, 2015 at 06:47 AM

    I took a look at your jotform and it seems that your image is now being mobile friendly and 'resizable'. I trust that this is no longer present issues, but do let us know if it is.

  • Profile Image
    riverinatradies
    Answered on March 06, 2015 at 07:12 PM

    But it isn't resizable?? The form itself is responsive what I am asking to if its possible to make the image within ther text field responsive as well so when viewed on a small screen resolution the size adjust so it leaves more room for the text

  • Profile Image
    Jan
    Answered on March 07, 2015 at 02:25 AM

    The image is responsive because once you view it on a mobile phone, it go on center and dropping the text down. The image width will only adjust if the screen size is lower than the image width. The image width is 280px. The mobile portrait width is 320px. You can preview the form in the Form Designer with mobile, tablet and desktop.

      

     

     

  • Profile Image
    riverinatradies
    Answered on March 09, 2015 at 09:02 PM

    Doesn't go to the centre when viewing on my phone. And as you can see in screenshot the word "To" is on it's own next to the image which looks awful. This is what I am talking about. :-(

     

  • Profile Image
    riverinatradies
    Answered on March 09, 2015 at 09:09 PM

    Sorry I didn't read your previous post properly. So to confirm, the only way this will look good on an iphone 6 and smaller is if I make the image at least 415px wide so the image is larger than the screen resolution. Obviously that isn't ideal as then it will be too big when viewing on screens with larger resolution.

    Any other solution?

  • Profile Image
    ashwin_d
    Answered on March 10, 2015 at 12:35 AM

    Hello riverinatradies,

    I did check your form in my iPhone 4S device and it seems to display the image correctly. Please check the screenshot below:

     

    When I checked your form in iPhone 6 (browser stack), I am able to replicate the issue you are having.

    I went ahead and increased the width of your image to "310 px" and that seems to have resolve the issue. Please check the screenshot below:

     

    I would suggest you to please test your form again and get back to us if the issue persists.

    Thank you!