What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Images are bigger on one of my forms when viewing on mobile devices

    Asked by betwrestling on March 11, 2017 at 09:09 AM

    I have two forms with the same pictures, exactly the same size. However when i view the forms on mobile on one of the forms the pictures are bigger then the other form.

    Why is this and how do i fix it? 

    URL of Form one where pictures are appearing at correct size: https://form.jotform.co/70601965055859

    URL of form two where pictures are appearing larger (although set as same size as above pictures: https://form.jotform.co/70208426775863

     

  • Profile Image
    JotForm Support

    Answered by Welvin on March 11, 2017 at 07:42 PM

    As far as I could see it, all forms are doing the same. They are both non-responsive on mobile devices. It's because of the width override in the custom CSS codes area. I've fixed it for you by removing this override. Please check now. 

  • Profile Image

    Answered by JOHNASIMSBLKONX1COM on March 11, 2017 at 10:38 PM

    THE FORM ON MY WEB PAGE UNDER MEDICAL TAB NEEDS TO HAVE THE HEADING CHANGED TO.

    BLACK ONYX MEDICAL LOAN FORM. ADDITIONALLY NEEDS TO HAVE OUR LOGO AT THE TOP ALSO PLEASE.

     

    THE SAME FORM NEEDS TO BE PUT ON TO ANOTHER WEBSITE:

    HTTPS:BLACKONYXMEDICAL.COM  WITH A SEND BUTTON TO MY EMAIL ADDRESS:

     

    LENDING@BLKONX1.COM

     

  • Profile Image
    JotForm Support

    Answered by Welvin on March 11, 2017 at 11:46 PM

    @JOHNASIMSBLKONX1COM: I have created a new thread for your inquiry. You can find it here: https://www.jotform.com/answers/1089199

  • Profile Image

    Answered by betwrestling on March 12, 2017 at 11:30 PM

    Thank you for your help.

    The problem now is both images are too large. (on mobile devices).

    This is how the form looks on the website, using a laptop: http://www.predictwrestling.com/predict (the correct size)

    As you can see the images are smaller then when visiting the page on mobile.

    How do i get them the same size as they are when viewing the form on a laptop?

  • Profile Image

    Answered by betwrestling on March 12, 2017 at 11:42 PM

    Also how do i fix this 'overide' to make my other forms mobile responsive? What CSS code to i need to delete? Thank you!

  • Profile Image
    JotForm Support

    Answered by BJoanna on March 13, 2017 at 05:42 AM

    I inspected your form on iPhone emulator and this is how your from looks like.

    Embedded form:

    Standalone form:

    As you can see image is responsive. 

    Are they not responsive on your end? If so, please provide us a screenshot of how the form looks on your end. Also please tell us which phone are you using. 

    Inside of this guide you can find how to make your form responsive:

    https://www.jotform.com/help/322-How-to-make-mobile-friendly-forms-on-JotForm 

  • Profile Image

    Answered by betwrestling on March 13, 2017 at 05:55 AM

    Thanks a lot for your help i really appreciate it!

    So, using a laptop computer the form (on my website) looks like this:

    Now when i view the same page on my mobile (I'm using a Samsung device) it looks like this:

     

    As you can see the image in the form is bigger when viewing on mobile which i do not want. I would like the image to be the same size as when viewing it on computers (smaller).

    Hope this makes sense!

  • Profile Image
    JotForm Support

    Answered by BJoanna on March 13, 2017 at 07:21 AM

    If I understood you correctly you want to increase the width of your images, when form is viewed on a laptop/computer.

    To achieve this you will need to increase size of you image inside of Form Builder. You can set width of you image to 626 px.

    After that your form will look like this on a laptop/computer.

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image

    Answered by betwrestling on March 13, 2017 at 05:19 PM

    The image size is the correct size when viewing the form on my laptop computer however it is too big when viewing on mobile devices. How do i change it so that when viewing on mobile devices the image will be the same size as it is when viewing on computers?

  • Profile Image
    JotForm Support

    Answered by Ian on March 13, 2017 at 10:15 PM

    I am still not able to replicate the issue for site http://www.predictwrestling.com/predict on mobile device.

    It looks proportional when viewed on mobile device

    This is how it appears to me on smaller screen

  • Profile Image

    Answered by Braden  on March 13, 2017 at 11:07 PM

    When viewing the webpage on laptop the images appear larger then when viewing on mobile. Is there any way this can be changed so that the images are the same size on mobile as they are on a computer?

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 14, 2017 at 02:01 AM

    Hi,

    Can you please try to inject this custom CSS on your form?

    @media screen 

      and (device-width: 320px) 

      and (device-height: 640px) 

      and (-webkit-device-pixel-ratio: 3) {

    img.form-image {

        width: 50%;

    }

    }

    @media screen 

      and (device-width: 360px) 

      and (device-height: 640px) 

      and (-webkit-device-pixel-ratio: 3) {

    img.form-image {

        width: 50%;

    }

    }

    @media screen 

      and (device-width: 360px) 

      and (device-height: 640px) 

      and (-webkit-device-pixel-ratio: 3) {

    img.form-image {

        width: 50%;

    }

     

    Result:

  • Profile Image

    Answered by betwrestling on March 16, 2017 at 05:50 AM

    Thank you so much that's so much better!

    One other question, how would i make the single choice questions (eg. 'Who will be the winner of this match?' and the text (eg. 'Brock Lesnar Vs. Goldberg Singles Match) smaller on mobile devices? Its perfect when viewing on a computer but when viewing on a mobile it is too big. 

    Looking forward to your reply :-)

  • Profile Image
    JotForm Support

    Answered by liyam on March 16, 2017 at 07:17 AM

    Hello,

    You can replace the CSS code you have used from Christian's recommendation from the previews response to this code:

    @media screen
      and (device-width: 320px)
      and (device-height: 640px)
      and (-webkit-device-pixel-ratio: 3) {

    img.form-image {
       width: 50%;
    }
    .form-radio-item {
       font-size: 11px;
    }
    }

    @media screen
      and (device-width: 360px)
      and (device-height: 640px)
      and (-webkit-device-pixel-ratio: 3) {
    img.form-image {
       width: 50%;
    }
    .form-radio-item {
       font-size: 11px;
    }
    }

    @media screen
      and (device-width: 360px)
      and (device-height: 640px)
      and (-webkit-device-pixel-ratio: 3) {
    img.form-image {
       width: 50%;
    }
    .form-radio-item {
       font-size: 11px;
    }
    }

    You will notice that it's just the same as Christian's CSS except that I inserted the font-size for the form-radio-item class.

    You can adjust the numeric value of the font size to your desire.

    Please get back to us if you have questions.

  • Profile Image

    Answered by betwrestling on March 16, 2017 at 07:47 AM

    I replaced the code however there are no changes no matter what font size i change it to.

  • Profile Image
    JotForm Support

    Answered by Welvin on March 16, 2017 at 09:17 AM

    For the radio button labels, inject the following custom CSS codes:

    .form-label {

        font-size: 11px !important;

    }

     

    For the radio button options:

    .form-radio-item label {

       font-size: 11px !important;

    }

     

    For the header in Text field:

    .form-html p, .form-html span {

        font-size: 11px !important;

    }

     

    Change 11px to your preferred size. 

  • Profile Image

    Answered by betwrestling on March 16, 2017 at 02:59 PM

    Thanks, i have tried all three and still no changes whatsoever. 

  • Profile Image
    JotForm Support

    Answered by Welvin on March 16, 2017 at 04:26 PM

    I've fixed it for you by replacing the media query to the following:

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

    img.form-image {

    width: 70%;

    }

    .form-html p, .form-html span {

    font-size: 12px !important;

    }

    }

     

    Simply add the radio button label/option CSS inside to adjust its font sizes. 

  • Profile Image

    Answered by betwrestling on March 16, 2017 at 05:25 PM

    Perfect! Thank you! Is there a way to adjust the line spacing for when viewing on mobile devices also?

    Also, i decided not to go with changing the text as i wanted the heading and the text below it different sizes. I was wondering if using a header would be a better way to go. If i was to do this, is it possible to change the size of the header and subheader when viewing on mobile devices? (i wouldn't want both the header and subheader the same size)

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 16, 2017 at 08:53 PM

    You can use the Header field on your form so that the header and the sub-header have different sizes when viewing it on mobile.

     

    Mobile View:

     

  • Profile Image

    Answered by   on March 16, 2017 at 10:16 PM

    Thank you is there a code to adjust the line spacing for when viewing on mobile devices?

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 17, 2017 at 01:34 AM

    Yes, you can adjust the font-size of both the header and sub-header when viewing on mobile. You just put this code inside the @media only screen.   Just change the font-size to your preference size.

     

     

    For example:

     

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

    img.form-image {

    width: 70%;

    }

    /* font-size for the header */

    h2#header_108 {

        font-size: 15px;

    }

     /* font-size for the sub-header */

    div#subHeader_108 {

        font-size: 11px;

     

    }

    }

     

     

     

     

     

     

     

     

       

     

  • Profile Image

    Answered by   on March 17, 2017 at 01:51 AM

    Thank you but what I'm asking is can the overall vertical line spacing of the form be adjusted by code for when viewing on mobile?

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 17, 2017 at 02:59 AM

    For vertical line spacing of the form, you can use the line-height, for example:

    line-height: 20px;

    Just change 20px to your preference size.

     

    Regards.

     

     

  • Profile Image

    Answered by betwrestling on March 17, 2017 at 04:05 AM

    That doesn't seem to be working.

    What i mean is i only want the line spacing adjusted when viewing the form on mobile, not on desktop. What is the code and where do i put it in the CSS section?

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 17, 2017 at 05:15 AM

    If you want the line-spacing adjusted when viewing the form on mobile, just add the line-height: 20px; inside the @media only screen. Just change 20px to your preference size.

     

    Example:

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

    img.form-image {

    width: 70%;

    }

    /* line-height for the header */

    h2#header_108 {

        line-height: 20px;

    }

     /* line-height for the sub-header */

    div#subHeader_108 {

        line-height: 20px; 

    }

    }