Display Questions, Images and Other Survey Elements Side by Side in Columns

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 Custom Group question type is the built-in feature we recommend using to display survey elements side by side. If the Custom Group question does not meet your needs this workaround works for most of our customers in most cases but may require some tweaking to get it right. If you have a solution that works better let us know!

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 first question 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%.

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.

Basic Standard Market Research HR Professional Full Access Reporting
Free Individual Team & Enterprise
Feature Included In