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

    Can I center my embedded form and make the images a little bigger for laptops without messing up the iPhone version of the form?

    Asked by surf_town on October 09, 2013 at 04:50 PM

    I need some formatting help. My form is embedded at the bottom of the following page:

    http://surftown.myshopify.com/

    Is there any way to center the form when viewed from a laptop and get the images to scale larger without messing up how it looks on an iPhone. Also the iphone has a left margin that I can't seem to get rid of.

    Thanks,

    Jeremiah

    Page URL:
    http://surftown.myshopify.com/

    thanks
  • Profile Image

    Answered by surf_town on October 09, 2013 at 05:05 PM

    By the way it's ok if you work directly on my form. I have made a clone of it and it's not live yet. Thx -J

  • Profile Image

    Answered by pinoytech on October 09, 2013 at 05:31 PM

    Hi Jeremiah,

    Can you please try to inject this custom css into your form?

    .form-all {

    padding-left: 150px;

    }

    @media only screen

    and (min-device-width : 320px)

    and (max-device-width : 480px) {

    .form-all {

    padding-top: 0px !important;

    padding-left: 0px !important;

    }

    input[type="radio"]+label img {

    padding-top: 20px;

    }

    input[type="radio"]+label img {

    padding: 1px;

    width: 150px !important;

    height: 100px !important;

    }

    .form-multiple-column .form-radio-item {

    width: 180px;

    }

    }

    Thank you!

  • Profile Image

    Answered by surf_town on October 09, 2013 at 06:26 PM

    The phone is looking good but on a laptop the images are overlapping, and when I resize the window on the laptop the form is not responding as well as the rest of the site.

  • Profile Image
    JotForm Support

    Answered by jonathan on October 09, 2013 at 08:39 PM

    Hi,

    Can you please try adding this CSS code into the current existing codes in your form

    .form-radio-item {margin-right : 150px;}

    I did a test using Chrome console and it seems to appy correctly.

     

    You may adjust the px value according to your preference.

    Hope this help. Inform us if you need further assistance.

    Thanks.

  • Profile Image

    Answered by surf_town on October 10, 2013 at 08:18 AM

    Hey there, it seems to work in most browsers. Thanks!