Hi there, would someone be able to help me solve this (probably very simple) question of how to center-align the graphic in a hot spot question. Is this something that could be solved with a line of JavaScript code?
Is it possible to center-align the graphic in a Hot Spot question?
Has anyone solved this? When we try to use CSS to align the hot spot container (with image and regions), the image centers but the hot spot regions are off center.
We are using this code snippet!
.HotSpotContainer {
text-align: center;
margin: auto;
}
The boxes used for highlighting are set by the CSS Path attribute (read here). These are defined by exact locations. So, if you plan to center your image, you'll need to change these numbers accordingly, like down to the pixels, otherwise your boxes will remain at their place.
hetarr Please check if the following code works for you. I am able to get the image center aligned, with the regions moving appropriately. However, I am using the boxed questions theme, so the results may differ.
Qualtrics.SurveyEngine.addOnReady(function () {
document.querySelector(".QuestionBody").style.display = "flex";
});
+1
I had the same question and tried the solution by ahmedA but it did not work for me, unfortunately.
+1
This is my question. I had to use a vertical graphic because that looks better on mobile. But when I do so it makes it awkwardly left-aligned on desktop.
brad7280 Could you share a link to the preview of the question? Also, like I said above, the results may vary due to the theme.
+1
ahmedA I'm not sure how to share a link to the preview but I made a new survey with just that question here: https://ncsu.qualtrics.com/jfe/form/SV_6mm9JdYNM1BqZhk
Thank you for your help!
Bradley
yup. The code above is working for your survey. See this:
You could try an alternative. Add this to your question HTML:
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.