Questions Side by Side and in Columns

Many customers have requested the ability to align questions into columns within their survey, or put on certain questions into columns or next to each other (side by side). Previously, this required a lot of custom work, but with improvements by the SurveyGizmo design team, it is now possible to do so using the SurveyGizmo feature which assigns a CSS class to your question, allowing you to manipulate its position within a survey page.

The primary concept is that the survey has a total width of 100%, and you decide how much width, by percentage, a particular question will take up on the survey. If you wished to have two questions next to each other in 2 columns, you would set them both to 50% width. If you wanted 3 columns, you would use 33% width, and so on. The final concept is to understand that your linear questions will now be arranged left-to-right if using the below method until the full 100% width is filled, then they will move top to bottom.

Here's a quick image to help you understand:

To access the Template CSS Hook within an individual question, click on the edit icon (pencil) to the left of the question which you wish to restrict to a specific width. Select the Formatting tab on the left, and at the bottom you will find the Template CSS Hook:

The format is sg-width-xx where xx represents the percentage of the total 100% width. Thus, for 50%, you would use sg-width-50. The next step would be to add the same sg-width-50 to the following question, which would now place it next to the previous question!

The final special Template CSS Hook you need to learn is sg-new-line. This should be used on the question that is immediately following the series of questions (on the same page) that use sg-width-xx. The purpose of sg-new-line is to force a line break, or ensure that it is not being split. As you can see in the image at the very top of this tutorial, it is used to ensure that the follow-up question does not get misaligned next to a previous question.