How to move fields to the right?

  • DiscoveryCharterSchools
    Asked on September 30, 2018 at 5:36 PM

    I need to move the two different pizza slices and the hot dog description and qty fields over to the left maybe line up with the bullet items just above it.  I have changed other fields but can't seem to get this one to work.

  • roneet
    Replied on September 30, 2018 at 11:02 PM

    Just to confirm, you want to align the fields toward left?

    How to move fields to the right? Image 10

    Confirm us so that I could work on the Custom CSS.

    Thanks

  • DiscoveryCharterSchools
    Replied on October 1, 2018 at 8:26 PM

    I want the bullets right where they are.  When you click on the bag deal check box several other items will pop up.  Those are the items I want to line up with the bullet.  Also, I want very little space between each question.

     

  • DiscoveryCharterSchools
    Replied on October 1, 2018 at 8:44 PM

    1538441018Screen Screenshot 10


    I want the Cheese Pizza slice and associated qty along with the other two items to line up under the bullet.


  • Kiran Support Team Lead
    Replied on October 2, 2018 at 12:52 AM

    Instead adding custom CSS code to the form that might affect the responsiveness of the form, I would suggest to use the columns from the Form Designer. Please refer #3 from the following guide to enable columns for your forms so that the fields shall be properly lined up and displays correctly on mobile devices as well.

    https://www.jotform.com/help/423-Setting-up-Form-Columns

    Please give it a try and let us know if you still need to move the Qty field to the left so that we can assist you further.

    Thanks!

  • DiscoveryCharterSchools
    Replied on October 2, 2018 at 1:43 AM

    I enabled columns and set the number of columns to 2.  The problem is that the text is still way over on the left.  I need to move it to the right.  

  • Victoria_K
    Replied on October 2, 2018 at 5:02 AM

    Hello,

    Unfortunately, I am not sure if this is the desired layout, but you can try the following code:

    #id_28, #id_29, #id_31 {

      width: 40%;

      padding-left: 12%;

    }

    #id_28, #id_29, #id_31, #id_27, #id_30, #id_32 {

      padding-top: 0;

      padding-bottom: 0;

    }

    153847091812 00 29 Screenshot 10

    Please add it according to the following guide: How-to-Inject-Custom-CSS-Codes