[Solved] Question Layout with three columns for desktop but one for mobile

0

Does anyone know how I can set up a question layout so that it has a three column layout on desktop but a one column layout on mobile?

I am sure it has to be done via CSS styling but I can’t find the style sheet tag that controls the layout and how to set it to be different between desktop and mobile.

Jon Erickson asked

    Best answer

    1

    Hey Jon!

    I think the easiest solution would be to override the `ul.sg-columns` classes. Targeting the mobile display only can be done by using the `.sg-mobile-optimized` parent selector. A separate selector will likely be needed for each different question type (checkbox/radio/etc) you are using in columns.

    E.g.,

    .sg-mobile-optimized .sg-type-checkbox ul.sg-columns,
    .sg-mobile-optimized .sg-type-radio ul.sg-columns {
    float: none;
    }

    .sg-mobile-optimized .sg-type-checkbox ul.sg-columns-2,
    .sg-mobile-optimized .sg-type-radio ul.sg-columns-2 {
    width: 100%;
    }

    .sg-mobile-optimized .sg-type-checkbox ul.sg-columns-3,
    .sg-mobile-optimized .sg-type-radio ul.sg-columns-3 {
    width: 100%;
    }

    I hope this helps!

    Nathan - Survey Astronaut answered
      0

      That was exactly what I needed.  Thank you.

      Jon Erickson answered
        ×

        Login

        Question stats

        • Active
        • Views2245 times
        • Answers2 answers
        • Followers1 follower