EngagementHQ's surveys are designed to be mobile-first to ensure that community engagement is accessible to all. Our survey questions and interface are designed to be usable and responsive on all devices. If your survey is not displaying correctly, it may be because of something within your survey Description or a Section Title and Description, such as a table or images.
We recommend testing all new and cloned surveys on all devices, particularly if you have tables, images, or videos in the Description or you have added HTML customizations.
Testing on your own mobile device is the best option available. This will give you the most accurate understanding of exactly how your survey will look on a smaller screen, and you can ensure your survey is accessible to all users.
You can also use your browser to replicate a mobile screen size:
Select Preview on your survey to open the standalone survey page.
Open your Developer Tools using Ctrl + Shift +I (on PC) or ⌘ +Option + C (on Mac). Another option is to right-click > Inspect.
With the Development Tools open, use Ctrl + Shift +M (on PC) or ⌘ + Shift +M (on Mac). This is Responsive Design Mode.
In Responsive Design Mode, you can use the dropdown menu at the top of the screen to switch between devices or specify a screen width in pixels.
You can add customized HTML to your surveys via Code View (< >). Please note that this is not supported, and we recommend using the existing functionality as much as possible. If you choose to add custom HTML, we recommend having knowledge of responsive design before you start.
Troubleshooting Tables
When you create a table using the text editor in the Details tab, it will automatically be responsive. The width of the table and the columns within it will use percentages, so it will adjust the content area when viewed on a desktop, tablet, or mobile device.
For example, a table with four columns will have a table width of 100%, while each column will be 25%. Using a responsive width, any text within the columns will wrap, expanding the height so all text is readable.
If the width of your table is expanding beyond the content of your survey, select < > to open Code View, look for any code with a specified number of pixels as the width, and change it to a percentage. For example, <table style="width: 999px"> must change to <table style="width: 100%">
Tables should be used for tabular data only and not for layout. If you need to use a table for layout, keep the column width to a percentage and add a role="presentation" tag to the <table> tag. The HTML of your table would begin like this: <table role="presentation">
Troubleshooting Images
By default, when you add an image to the text editor in a Description field, it will appear at 300px width.
To change the default width of your image, select it and choose the Ruler icon to open your Change Size options. You can change the Width and Height in pixels or a percentage and select Update to apply.
Regardless of the size, images in a table will scale to fit the column. If your images are wider than the width of the table or columns, the images may be smaller than anticipated. If this is problematic, consider placing the image within the text using your image alignment and display options instead of within a table.
If you have a choice question that relates to a series of images, consider using the Checkbox or Radio button question types, which both allow you to convert the options to images.
Troubleshooting Videos
Videos placed within a Description field text editor will default to 100% width of the context area. A 100% width ensures that the video will be responsive on all screens, and mobile users can watch it without any problems.
While we recommend placing a video directly into the Description field, if you need to change the video size, you can place the video into a table and resize the table. To align the video to the left or right, create a two-column table and place the video on either side. To center align the video, create a three-column table with a wider central column than the left and right, then place the video in the center.
Please note that tables are also responsive, so a video in a table may be much smaller on a mobile device. You’ll need to Preview the video on all screens to ensure it’s the correct size.
What Else?