CSS to reduce vertical spacing of checkboxes?


I have a checkbox question and I want to make it compact to reduce space between choices that are laid out vertically.  I can’t figure out what type of custom CSS to include here?


I have attached screenshot of the question that I am trying to modify.

Bruce Howard answered

    You can go into layout for the question and select Horizontal instead of vertical to change the display of the question involved.

    KC Townsend answered

      I am using a lot of Likert-scale answers. On mobile phone, the vertical space between answers is very large. Can anyone give me very specific directions on how and where to update the CSS and reduce the spacing? I am not a coder, so I would need the code if you please.

      amy_aha commented
        • Bruce, Did you ever get an answer to this? I’m trying to do the same thing but can’t seem for the life of me to choose the right css selector…


        You might also experiment with the following CSS:

        .sg-question {

        line-height: 1;


        The line-height attribute has an impact on the spacing between answer options as well. 1 is the default, I believe.

        I hope this helps!

        Dominic Sharpe answered

          Sorry, just noticed you wanted to reduce space.


          Suggest using same selector and adjust the padding attribute think you have 0.5em to play with top and bottom.

          Fiachra311302 answered

            Its a list so increase the top/ bottom margin on the li element type


            .sg-type-checkbox ul.sg-list li {

            margin: 2em 0em 1em 0em;


            Test for impact on mobiles etc.

            Fiachra311302 answered


              Question stats

              • Active
              • Views10076 times
              • Answers5 answers
              • Followers1 follower