Align sub-labels in two-column payment field

  • Profile Image
    Asked on July 27, 2018 at 09:50 AM

    I followed the guide from this link to divide products into : 

    The problem is when I made the payment field into two columns using CSS codes, the sub-headers also belonged in one column like other products and made the list confusing.

    Is there a way to change the width of the sublabels to double the width of a column? Or maybe apply the code of shrinking the products into two columns EXCEPT for the sublabels - anything that works, please.

  • Profile Image
    Answered on July 27, 2018 at 11:27 AM

    Please inject the following custom css code in your form and that should solve your problem:

    #cid_23 > div > div > span:nth-child(31) {

        width: 100%;


    #cid_23 > div > div > span:nth-child(59) {

        width: 100% !important;


    label[for*="23_1015"], label[for*="23_1031"] {

        font-weight: bold;

        text-decoration: underline;

        pointer-events: none;


    span#input_23_1015_price, span#input_23_1031_price {

        display: none !important;


    input#input_23_1031, input#input_23_1015 {

        display: none;


    The following guide should help you how to inject custom css code in form: 

    Hope this helps.

    Do get back to us if you need any other changes.