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

  • riverinatradies
    Asked on March 5, 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?

    Page URL: https://secure.jotform.co/form/50529112821851
  • Ben
    Replied on March 6, 2015 at 6: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.

  • riverinatradies
    Replied on March 6, 2015 at 7: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

  • Jan
    Replied on March 7, 2015 at 2: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.

    Is there a way to make images within a text field responsive? Image 1 Screenshot 30  Is there a way to make images within a text field responsive? Image 2 Screenshot 41

     

     

  • riverinatradies
    Replied on March 9, 2015 at 9: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. :-(

     

    Is there a way to make images within a text field responsive? Image 1 Screenshot 20

  • riverinatradies
    Replied on March 9, 2015 at 9: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?

  • Ashwin JotForm Support
    Replied 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:

    Is there a way to make images within a text field responsive? Image 1 Screenshot 30

     

    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:

    Is there a way to make images within a text field responsive? Image 2 Screenshot 41

     

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

    Thank you!