Custom CSS: How to put quantity to the same line as product?

  • Profile Image
    hpaschenko
    Asked on June 09, 2021 at 12:47 PM

    In the How often box, I would like to move the 'unlimited number of payments' in the sam line as the selection above, or at least move it up closer. Maybe even separator line inb etween selections....Thanks in advance

  • Profile Image
    Laura_L
    Answered on June 09, 2021 at 06:52 PM

    Hi,

    Please use the following CSS code to set the quantity to the same line:

    .form-product-item {
    width: 600px !important;
    }
    .form-product-item br {
    display: none;
    }
    .form-product-item .form-sub-label-container {
    width: 250px !important;
    margin-top: -25px !important;
    margin-right: -55px !important;
    float: right;
    }


    Here is how to add the code to your form:
    How-to-inject-custom-css-codes

    I'm afraid that it's not possible to add separator lines to the product fields. Currently, it's possible to add dividers only between elements.

    Let us know if you need further assistance.

  • Profile Image
    hpaschenko
    Answered on June 10, 2021 at 04:41 PM

    Thank you, That worked great!!!!

    but now, how can I align the " (price box) USD....." so that it is in line with others


  • Profile Image
    Laura_L
    Answered on June 10, 2021 at 06:23 PM

    Hi,

    Happy to hear that!

    Please try inserting the following code to aling the prices:

    #input_54_1003_custom_price, #input_54_1000_custom_price{
     margin-left: 10px !important;
    }
    #input_54_1002_custom_price{
     margin-left: 28px !important;
    }


    This should make the prices look something like this:

    1623363789_60c290cdb14ea_howoften.png

    Let us know how it goes.

  • Profile Image
    hpaschenko
    Answered on June 10, 2021 at 11:37 PM

    Thank you...worked, but... one more thing. The parenthesis "(" do not line up.

    Could we either line them up of get rid of both "(" and ")"

  • Profile Image
    ashwin_d
    Answered on June 11, 2021 at 06:33 AM

    I am not sure if I have understood your question correctly. Do you mean to say that you want "(" of all products to be aligned one below the other in one line?

    Please let us know, and we will see if it is possible.

    We will wait for your response.

  • Profile Image
    hpaschenko
    Answered on June 11, 2021 at 08:43 AM

    Yes, I would like the "(" of all products to be aligned one below the other, they do not look professional. could the "(" be positioned? right before the amount box?

    1623415259_60c359db7ccc9_

  • Profile Image
    Michal_S
    Answered on June 11, 2021 at 10:04 AM

    Hello!

    To achieve the desired effect:

    • Remove the code (sorry, Linda!) from your custom CSS:

    #input_54_1003_custom_price, #input_54_1000_custom_price {

      margin-left : 13px !important;

    }

    #input_54_1002_custom_price {

      margin-left : 23px !important;

    }

    #input_54_1000_custom_price {

      margin-left : 8px !important;

    }


    • Insert this CSS code into your form's Custom CSS:


    [for=input_54_1003] .form-product-details

    {

     margin-left:14px!important;

    }

    [for=input_54_1000] .form-product-details

    {

     margin-left:9px!important;

    }

    [for=input_54_1001] .form-product-details

    {

     margin-left:6px!important;

    }

    [for=input_54_1002] .form-product-details{

     margin-left: 27px!important;

    }


    This won't look right in the form builder, but it looks right on the live form:

    131928_1.png

    Please let us know if you require any further assistance.

    Thank you!


  • Profile Image
    hpaschenko
    Answered on June 11, 2021 at 01:06 PM

    Works great on lap top Thank you!!

    but on phone (see below) , the amount box is way too big. Could you help me again?

    1623431166_60c397fe11cac_

  • Profile Image
    taylor
    Answered on June 11, 2021 at 05:11 PM

    Hello! 👋

    It took a bit of testing but I believe this should resolve your display issue on mobile. Just paste this bit at the end of your custom CSS that you already have on the form.

    @media only screen and (max-width: 480px) { 
        [for=input_54_1004] .form-product-details {
            font-size: .4em;
        }
        [for=input_54_1003] .form-product-details {
            font-size: .4em;
        }
        [for=input_54_1002] .form-product-details {
            font-size: .4em;
        }
        [for=input_54_1001] .form-product-details {
            font-size: .4em;
        }
        [for=input_54_1000] .form-product-details {
            font-size: .4em;
        }
        #product-name-input_54_1004{
            font-size: .4em;
        }
        #input_54_1004_custom_price {
            width: 5%;
        }
        #product-name-input_54_1003{
            font-size: .4em;
        }
        #input_54_1003_custom_price {
            width: 5%;
        }
        #product-name-input_54_1002{
            font-size: .4em;
        }
        #input_54_1002_custom_price {
            width: 5%;
        }
        #product-name-input_54_1001{
            font-size: .4em;
        }
        #input_54_1001_custom_price {
            width: 5%;
        }
        #product-name-input_54_1000{
            font-size: .4em;
        }
        #input_54_1000_custom_price {
            width: 5%;
        }
        .form-product-item .form-sub-label-container {
          margin-right : 230px !important;
          margin-top: 10px!important;
    }
    }

    It should look like this on mobile devices.

    1623445806_60c3d12e4ac98_

    Feel free to adjust the spacing and font sizes as needed, was just trying to get the layout in the form's payment field in an effective way. I hope this helps! If you need any additional help, please let us know!

    Thanks!

  • Profile Image
    hpaschenko
    Answered on June 12, 2021 at 08:09 AM

    Thank you!!!! All good now!