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

    What is the optimum size I should make thumbnails?

    Asked by SportsInActionPhotos on November 14, 2016 at 02:04 PM
    mobile thumbnails
  • Profile Image
    JotForm Support

    Answered by david on November 14, 2016 at 03:34 PM

    That would depend on the size of your page, what is being displayed in the images and several other factors.  The current thumbnails in your form do appear to be a bit small.  You can adjust the minimum height of the product boxes by adding the following code to your form:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    .form-product-image, .form-product-image-with-options {
        width : 60px !important;
        height : auto !important;
    }

    #cid_3 span.form-product-item {
        min-height : 40px;
    }

    The first value will adjust the size of the image, the second will adjust the initial height of the product boxes.

    Here is how the form would look with the above code added:

    https://support.jotform.com/form/63185956423968

  • Profile Image

    Answered by SportsInActionPhotos on November 14, 2016 at 05:04 PM

    I like this - can you also make the header row names center justify up and down.

    I know, "new topic", right?



    Though, I think it my page will look better with other suggestion of insert a photo at headers and then hide them - but i'm worried about making one of these forms for each of my customers and having to remember a formula or code - but i have to test it first to see how it looks.

  • Profile Image
    JotForm Support

    Answered by david on November 14, 2016 at 06:31 PM

    To adjust only the text for the products used as the section headers, add this code:

    label[for*="1010"],label[for*="1011"],label[for*="1012"] {
        margin-left : 140px;
    }

    Here is the updated form:

    https://support.jotform.com/form/63185956423968

    Once you have your form set up the way you'd like, you can clone new copies with the same layout and update the new copy:

    https://www.jotform.com/help/27-How-to-clone-an-existing-form-from-your-account

  • Profile Image

    Answered by SportsInActionPhotos on November 21, 2016 at 03:47 PM

    https://www.jotform.com//?formID=63255051919154#design

    Need help with previewing this form around landscape and portrait product images.

    I keep trying different things in code- could use your help to be faster.

    I get confused at the different parts of the product list that gets highlighted that the CSS can affect.

    ie: sometimes the whole page gets affected and other times only one section.

  • Profile Image
    JotForm Support

    Answered by david on November 21, 2016 at 05:30 PM

    The following code should produce a much cleaner look on mobile:

    @media only screen and (max-width: 480px){
        #cid_3 span.form-product-item {
            min-height : 140px;
            margin : 0px 0px 0px 0px;
        }
        .form-product-image, .form-product-image-with-options {
        width : 60px;
        height : 60px;
    }

    Here is a test copy of the form with the code added:

    https://www.jotformpro.com/form/63256889780978

     

  • Profile Image

    Answered by SportsInActionPhotos on November 21, 2016 at 07:34 PM

    thanks- is it possible to make the product name lower - ?bottom justify?

    so not so big a space on phone @media on screen code as above..

    especially the "group header labels"

    thanks, deb

    you guys do this code stuff so easy! thanks.

  • Profile Image
    JotForm Support

    Answered by jonathan on November 21, 2016 at 10:47 PM

    Hi Deb,

    Please try this @media code on the mobile form.

     

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

        #cid_3 span.form-product-item {

            min-height : 140px;

            margin : 0px 0px 0px 0px;

        }

        .form-product-image, .form-product-image-with-options {

            width : 60px;

            height : 60px;

        }

    .form-product-item .form-radio, .form-product-item .form-checkbox {

        margin-top: 40px !important;

    }

    .form-product-item label, .form-product-item .form-radio, .form-product-item .form-checkbox {

        vertical-align: bottom !important;

    }

    }

     

    I used David's latest version of the form and changed the @media code. Here is my version of the form https://www.jotformpro.com/form/63258194498975

    it look like this on mobile.

     

    Let us know if this did not work.

    Thanks.

     

     

     

  • Profile Image

    Answered by SportsInActionPhotos on November 21, 2016 at 11:05 PM

    Thank you!

    This worked for the products that have photos.

    But not for the products that ... the group "headers" 
    the products that have the photo hidden in order to be the group headers.

     

    any ideas?  for the ?

    thanks for your time.  :-)

     

  • Profile Image
    JotForm Support

    Answered by Welvin on November 22, 2016 at 12:44 AM

    I don't see the vertical space now so I think you've figured this out already. Here's a screenshot from my mobile phone:

    Please get back to us if you need further assistance.

  • Profile Image

    Answered by SportsInActionPhotos on November 22, 2016 at 09:30 AM

    thanks for all your help with this!


     

    It still shows this way in preview and on my iphone.

    https://www.jotform.com//?formID=63258992817168

     

  • Profile Image
    JotForm Support

    Answered by BDAVID on November 22, 2016 at 10:38 AM

    Please inject the following CSS code in your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

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

    span.form-product-item:nth-of-type(1){

        min-height: 30px !important;

    }

     

    span.form-product-item:nth-of-type(6){

        min-height: 30px !important;

    }

     

    span.form-product-item:nth-of-type(9){

        min-height: 30px !important;

    }

    }

    You can check my cloned version of your form: https://www.jotformpro.com/form/63263841837967? 

    Result:

    Let us know if you need more help.