How can I change the font size in Passage Test widget using CSS code?

  • Profile Image
    ppata
    Asked on June 13, 2017 at 06:40 AM

    I have created a form and I have added Passage Test widget to create 10 different passages with blanks. However the font is really small and I feel that this could discourage people from taking part. Is there a code I could add to change the font ? (I am quite a novice with CSS so any help would be much appreciated).

     

    Thank you

  • Profile Image
    Saccarab
    Answered on June 13, 2017 at 07:48 AM

    Hey ppata,

    .form-group{

            font-size: 20px;

    }

    Try injecting this CSS code to the widget.

    You can change the pixels to your own liking.

     

    .textbox{

    font-size: 20px;

    }

    You might also want to use above CSS to adjust size of the answer text to prevent disproportion.

  • Profile Image
    ppata
    Answered on June 13, 2017 at 08:42 AM

    Thank you so much, Saccarab. I've put both and they work just fine!

    Now I want to change the spacing between the lines , so I tried 

     

    form-group{

            line-height: 2.0;

    }

    but in vein!

    Can you tell me why?

     

    Thanks again,

     

  • Profile Image
    Saccarab
    Answered on June 13, 2017 at 09:00 AM

    .form-group{

    line-height: 20px !important;

    }

    This seemed to work out for me.

    You are definitely on the right track but the expression probably needed a "!important" tag which lets you override the default styling settings.

    Cheers!

  • Profile Image
    ppata
    Answered on June 13, 2017 at 09:05 AM

    And it worked for me as well!

    Thanks for your prompt help, much appreciated. Thank you also for the tip about the tag.

     

     

  • Profile Image
    AIDAN
    Answered on June 13, 2017 at 10:09 AM

    I am glad your request has been addressed. If you need anything please don't hesitate to contact us. We will be happy to help.