Tutorial: Quick Tip: Images Side by Side

By default, images added to your survey through the ‘Add descriptive text/images’ option are added as individual items in the survey, similar to questions added to the survey. However, sometimes it may be preferred to place images side-by-side on the page. This can be accomplished by adding a Template Hook Name to the image as well as some custom CSS to the Look & Feel of the survey.

The Template Hook Name is visible when you Advanced Edit (small notepad icon to the left of the image in the survey editor) the image. At the bottom, you can specify a case-sensitive Template Hook Name that can then be manipulated by the CSS under Look & Feel. It is important that the capitalization is exact between the two areas. In our example, we are using the Template Hook Name: SideBySide

Next, in This Theme’s CSS Template (part of Edit Survey > Look & Feel), add the following to the bottom:

.SideBySide, .SideBySide div { display: inline; }

Now, any item with the Template Hook Name of SideBySide will be affected by the above code. To see a sample survey comparing the default method and the new SideBySide method, check out the following survey: http://surveygizmo.sidebyside.sgizmo.com/

Bonus Tip: If you use this for an open textbox question and a ‘descriptive text’ afterwards, the question title will be on the left of the textbox while the descriptive text will be similar to a label on the right of the textbox!

If you have any further questions, please use our community forums.