How can I customize the size of a HotSpot Question? | XM Community
Skip to main content

Hello,

I have a survey with images that I would like to present as HotSpot questions. I would like the presentation of these questions to be custom-sized to fit the survey takers’ screens. 

Currently, I have the following CSS code under Look and feel > Style.

#SkinContent{ width:100vw; } 
#SkinContent{ height:100vw; } 
.Skin .HotSpot .QuestionBody{
display: flex;
justify-content: center;

}
.Skin .HotSpot .QuestionBody {
  width: 85% !important;
  height: 85% !important;
}

The idea here was to size the “canvas” on which the images are presented to the screen (100vw) and to center the images and size them such that they cover 85% of this screen area. The last part of this snippet of code didn’t seem to do anything. I also tried other variations I could find online, to no effect. How can I custom-size a HotSpot question? Your help would be much appreciated.

Hi @SimgeT, this part of the CSS already do the job, no need for other

.Skin .HotSpot .QuestionBody {
  width: 85% !important;
}

So I wonder if there’s any other code interfering with it.

Hi @SimgeT, this part of the CSS already do the job, no need for other

.Skin .HotSpot .QuestionBody {
  width: 85% !important;
}

So I wonder if there’s any other code interfering with it.

Hi Nam,

Thanks for the reply. I have no other custom code under Style besides what I already gave above. I am also confused. Is it possible that this customization is by default incompatible with HotSpot aesthetics, since it would require the HotSpot regions to be dynamically adjusted to cover regions of the images?

Hi @SimgeT Thank you for posting this question, as I encountered the same issue 😥 I am wondering if you have successfully resolved it now, and I would love to learn from your experience. Thank you so much!

Leave a Reply


Terms & Conditions