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

  • Profile Image
    TycenDemolitions
    Asked on January 23, 2018 at 07:24 PM

    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

  • Profile Image
    Kevin_G
    Answered on January 23, 2018 at 10:08 PM

    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.

  • Profile Image
    TycenDemolitions
    Answered on January 23, 2018 at 10:21 PM

    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.

  • Profile Image
    TycenDemolitions
    Answered on January 24, 2018 at 12:09 AM

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

    This works for me in this form.

    Thanks

  • Profile Image
    Ardian_L
    Answered on January 24, 2018 at 06:05 AM

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

  • Profile Image
    stivesphoto
    Answered on January 24, 2018 at 08:59 AM

    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)