How to stop the image filling the screen width on mobile phone.

Hi 

I have a form in which i would like the logo and the company name to appear on the same line. The logo is in an 'Image' element and the company name in in a 'Text' element. I applied the shrink function to both elements and placed them on the same line in the form designer.

They appear on the same line on PC based browsers and look great but on mobile phones the logo resizes and takes up the whole screen width, and looks awful and pixelated. I tried applying and removing the mobile responsive widget but that did not change the resizing issue. 

How can i prevent the image resizing on mobile and make it stay on the same line as the text on PC and Mobile screens. 

Thanks

You may try injecting the following CSS code to your form: 

@media only screen and (max-device-width: 550px){

  #id_24 {

       width: 49% !important; 

  }

}

This guide will help you injecting the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

I hope this helps.

Thanks for the solution.

It stopped the image resizing to max width problem, so the solution enables me to have control over the image size which is great.

However the text still appears on the next line, not on the same line to the right of the image.

Any idea how this can be achieved?

Thanks for your time.

I got the required result by adding a header image to the header element.

This works for me in this form.

Thanks

I am glad to know that you have figure it out. Please let us know if you have any other question.

Have you considered putting the text and logo together into one image and using that? On the example you quoted above the text doesnt scale in size so the logo looks small in comparison.

(Just a thought)