The font size of the first digit in the prices of my payment items is very small

  • Tomchipjf
    Asked on June 17, 2017 at 9:54 AM

    The first digit on my form has a very small font

    Jotform Thread 1176319 Screenshot
  • WilliamR
    Replied on June 17, 2017 at 10:18 AM

    Can you try to add the following CSS code. (Here's how to insert CSS codehttps://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes )

    .form-payment-total b > span > span > span, .form-product-details b > span > span {
        font-size: 15px;
    }

    You can change the value of the font-size and increase if if you like. Let me know if that works for you.

  • Tomchipjf
    Replied on June 17, 2017 at 12:07 PM

    Thanks WilliamR, I just do not understand why it's doing this on only one of my forms... None of the other forms I have made have this issue..

     

  • Welvin Support Team Lead
    Replied on June 17, 2017 at 2:03 PM

    That's the style of the font that you have selected/added for the form. Change the price of the other form to 4 (to test it), you'll see they're the same. 

    A workaround would be to change the font size of the prices. To do this, inject the following custom CSS codes to your form:

    .form-product-details {

        font-size: 15px !important;

    }

    Change 15px to your desired size. The output would be like this:

    The font size of the first digit in the prices of my payment items is very small Image 1 Screenshot 20

  • Tomchipjf
    Replied on June 17, 2017 at 2:39 PM

    I wasn't able to figure out where to put the code. But I did figure out where to change the font.

    Click "Form Designer" (top right - Paint Roller Icon)

    Click "Styles" Tab

    Scroll down to "Font"

    Select a different font from drop down menu.  (I chose ARIEL BLACK)

    Problem solved!!

    Thank You For pushing me in the right direction by saying it was the font style! 

    Tom

  • Support_Management Jotform Support
    Replied on June 17, 2017 at 5:32 PM

    Hey Tom, I'm glad you're all set. For future reference, refer to the guide I'm linking below on where to inject CSS Codes. Actually, you're almost there - Instead of going to the STYLES tab after clicking the FORM DESIGNER icon, go to the CSS tab.

    Complete guide: How-to-Inject-Custom-CSS-Codes 

  • Tomchipjf
    Replied on June 17, 2017 at 10:43 PM
    Got it!! Thanks!
    Tom
    www.sandwichcoffeeroasters.com
    ...