How can I center the sub total, tax, and total in the Paypal payment field?

  • Profile Image
    ICS2013
    Asked on March 27, 2017 at 10:04 AM

    Hi, Hello, I have a form on my website and I would like to center the section of paypal. Now it is aligned to the left (Subtotal, Tax, Total). I would also like to increase the size of the text. Is it possible to customize those items? How do I do it?

    Thank you!!

     

     

     

     

  • Profile Image
    Welvin
    Answered on March 27, 2017 at 01:13 PM

    Inject the following custom CSS codes to your form; To center the elements:

     

    .form-payment-price {

        float: none;

    }

    span.form-payment-subtotal.form-payment-label {

        text-align: center;

    font-size: 15px;

    }

    .form-payment-subtotal, .form-payment-shipping, .form-payment-tax {

        max-width: 100% !important;

    }

    span.form-payment-tax.form-payment-label {

        text-align: center;

    font-size: 15px;

    }

    span.form-payment-total {

        text-align: center;

    font-size: 15px;

    }

    .form-payment-total {

        max-width: 100% !important;

    }

    Change the font size value to your liking.

    To inject, follow the steps here: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Let us know if you need further assistance. 

  • Profile Image
    ICS2013
    Answered on March 27, 2017 at 02:45 PM
    Ok, many thanks!!
    But, one more things:
    - Now a fine line appears (Screeshot attached)
    - It is possible to increase the text “€ 1,00 EUR”?
    Thanks!
    http://www.internationalcruisesummit.com//ICS2017Azul/tarifas-eng.html
    ...
  • Profile Image
    John_Benson
    Answered on March 27, 2017 at 06:20 PM

    Yes, that is possible. You can increase the text of "1,00 EUR". Please inject this custom CSS code to your form: 

    span.form-payment-total { 

        font-size: 20px !important; 

    Here's a guide on: How-to-Inject-Custom-CSS-Codes. Here's the result after adding the custom CSS code:

    The screenshot you're trying to share is not showing on this post. Please use this guide on: How-to-add-screenshots-images-to-questions-to-the-support-forum. Also, please provide more details about the line on what you're trying to achieve. 

    Hope that helps. We'll wait for your response. Thank you.

  • Profile Image
    ICS2013
    Answered on March 28, 2017 at 02:18 AM

    Hello, I was referring to the two elements indicated in the screenshot:

    - Increase the “€ 1,00 EUR"

    - Remove the fine line

    Thanks!

  • Profile Image
    John_Benson
    Answered on March 28, 2017 at 03:46 AM

    Hi, thank you for providing a screenshot of the issue. Please inject this custom CSS code to your form:

    .form-product-details { 

        font-size: 14px !important; 

    .form-payment-divider { 

        display: none !important; 

    Here's a guide on: How-to-Inject-Custom-CSS-Codes. Here's the result after adding the custom CSS code:

    Hope that helps. If you have questions or need further assistance, let us know. Thank you.