Have you ever wanted to align questions into columns within a survey, or put questions next to each other on the page? The easiest way to achieve this is with the Custom Group question type which allows you to group multiple questions together and control whether they display on the same line.
In most cases, the Custom Group question will meet your layout needs, but if you prefer to use individual questions or if you've already built your survey, we have a workaround!
You can add a CSS Class Name to your question and some CSS Code to your Style tab to manipulate the width of the 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 wish 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 could use 33% width, and so on.
The final concept is to understand that your 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.
How do I set it up?
First, add one or all of the below CSS codes that you wish to apply to your questions to your survey theme. To do so go to the Style tab and scroll to the bottom of the survey preview to access the link for the HTML/CSS Editor. The below codes should be placed in the field on the Custom CSS tab.
/*To specify that the question take up 50% of the page*/
.width-50{
clear: none;
float: left;
width: 50%;
}
OR
/*To specify that the question take up 33% or 1/3 of the page*/
.width-33{
clear: none;
float: left;
width: 33%; }
OR
/*To specify that the question take up 25% or 1/4 of the page*/
.width-25{
clear: none;
float: left;
width: 25%; }
Next, edit the questions you wish to restrict to a specific width. On the Layout tab, scroll to the bottom to find the CSS Class Name field and add the corresponding class name for the width you wish to apply: width-50 for 50%, width-33 for 33% or width-25 for 25%.
Apply the above changes to all questions that one would like to display side by side.
A Note About Browser Differences
There may be variation in how different browsers render the sg-width CSS Class Name. If you specify an odd sg-width that adds up to more than 100% e.g. width-33, most browsers will split this in half properly, however Internet Explorer will divide odd numbers by 2 and round up. Because this adds up to more than the page width, this will cause one of the questions to get dropped to the next line.
