Is it possible to center-align the graphic in a Hot Spot question? | XM Community
Skip to main content
Question

Is it possible to center-align the graphic in a Hot Spot question?

  • November 23, 2020
  • 8 replies
  • 265 views

Qualtrics help center.pngHi 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?

8 replies

  • January 5, 2021

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;
}


Forum|alt.badge.img+22
  • Level 7 ●●●●●●●
  • January 5, 2021

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.


Forum|alt.badge.img+22
  • Level 7 ●●●●●●●
  • January 6, 2021

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";
});


brad7280
Forum|alt.badge.img+4
  • March 26, 2021

I had the same question and tried the solution by ahmedA but it did not work for me, unfortunately.


brad7280
Forum|alt.badge.img+4
  • March 26, 2021

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.
off center.png


Forum|alt.badge.img+22
  • Level 7 ●●●●●●●
  • March 26, 2021

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.


brad7280
Forum|alt.badge.img+4
  • March 26, 2021

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


Forum|alt.badge.img+22
  • Level 7 ●●●●●●●
  • March 26, 2021

yup. The code above is working for your survey. See this:
image.pngimage.pngYou could try an alternative. Add this to your question HTML: