Paragraph field's font size is superseded by the font size of the form

  • Profile Image
    ctbcmcsd
    Asked on June 08, 2020 at 02:02 AM

    I have a paragraph element and a multiple choice question, both having the same text content. How do I make sure they have the same font sizes? The form designers says its Verdana 16pts, while the paragraph element details are Verdana 11pts.

    1591596017jotform Q.JPG

     

    1591596079jotform Q2.JPG

     

    -----------------

    I tried to set via css a different font size at 12pts just to test it, see sample below:

    1591599289jotform Q3.JPG

     

    However, as soon as I leave that field, it reverts back to its original size.

    1591599341jotform Q4.JPG

     

    https://form.jotform.com/201551138692454

  • Profile Image
    gerardw
    Answered on June 08, 2020 at 07:18 AM

    The font size on the paragraph needs to be setup separately from inside the field as you can see a text editor tool bar inside the field.

    Example:

    15916142640806_10.png

    Please try this and let us know.


  • Profile Image
    ctbcmcsd
    Answered on June 08, 2020 at 10:25 PM

    Yup I understand what you're saying about the paragraph. What I don't get is why the base font size is 16pts, but it looks close compared to the paragraph at 11pts.




    1591668859q.JPG


  • Profile Image
    JohnRex
    Answered on June 09, 2020 at 01:57 AM

    It seems that the font size set in the Paragraph field is being superseded by the form's font.

    Please try this workaround:

    15916822392374126.gif

  • Profile Image
    ctbcmcsd
    Answered on June 10, 2020 at 04:25 AM

    If the Paragraph field is being superseded by the form's font, what could be the issue here with the sample image below? Is it the kerning/tracking? The 2nd #6 uses the Paragraph field but they don't have the same result. They have a differrent text widow/orphan.


    1591776921q1.JPG

  • Profile Image
    gerardw
    Answered on June 10, 2020 at 06:32 AM

    The Text editor in the Paragraph field works separately with respect to the form font size. The the source code within the text-element tends to override the other font size. So, injecting HTML code into the source code of the text-element will make it work separately.


  • Profile Image
    ctbcmcsd
    Answered on June 10, 2020 at 09:56 PM

    If the Paragraph field works separately with respect to the form font size... then is it really true that the Paragraph field may have a Verdana 11pts, and it will look closely-sized to the form font at Verdana 16pts?



  • Profile Image
    gerardw
    Answered on June 10, 2020 at 11:33 PM

    Yes, as far as I can see the paragraph field uses a different text editor like an mce editor and hence the difference in size. Hence you will see the 11 px size on this field similar to the 16 px size setup on the form.

  • Profile Image
    ctbcmcsd
    Answered on June 10, 2020 at 11:54 PM

    Noted on this. Is there a possible way for the Paragraph field to be superseded by the form's font, or to reflect the form's font size? I made the 2nd #6 question using the Paragraph field so that I can customize (to be able to underline or bold a font) the question. But when viewed on mobile, the difference in font size is noticeable.


  • Profile Image
    JohnRex
    Answered on June 11, 2020 at 01:12 AM

    You can add custom CSS code to do that. For example, we can set the font size to 16px for that specific question and make it bold when viewed on mobile. Here's a code for that:

    @media screen and (max-width: 480px){

    div#cid_120 {

        font-size: 16px!important;

        font-weight: bold;

    }

    }

    Here's how it looks on mobile:

    15918523002374126.png

    GUIDEAdding-Custom-CSS-in-JotForm