Image in labels change size | Experience Community
Skip to main content
Solved

Image in labels change size

  • January 13, 2022
  • 2 replies
  • 70 views
E
Forum|alt.badge.img

In my survey, I am using 10 images as labels (smiley faces). In preview mode, the first and last image come out much smaller than the rest.
When I add text with the image through the rich content editor, I have a different but similar problem (bottom line), where these two images are much larger on mobile devices.
Customer support instructed me to change this using custom code, but I have never worked with this before. Can anyone help me to find out how to address the issue?
Qualtrics_preview.jpg

Best answer by Rudi

Hi,
have you tried to use the image tag for your smilies?

you might even consider to style the text and/or image tag within a div or span and thus move them up/down a bit



please note: adopt the 10 to your needs/likings

Best regards

Rudi

2 replies

Rudi
QPN Level 3 ●●●
Forum|alt.badge.img+16
  • Rudi
  • QPN Level 3 ●●●
  • Answer
  • January 18, 2022

Hi,
have you tried to use the image tag for your smilies?

you might even consider to style the text and/or image tag within a div or span and thus move them up/down a bit



please note: adopt the 10 to your needs/likings

Best regards

Rudi

E
Forum|alt.badge.img

Hi Rudi,
Thanks! The padding did help somewhat (as long as I kept the third #px high enough, the rest did not seem to matter much), but it created quite some distance between the image and label. Also, it had different effects on different types of questions.
For anyone in the future with similar problems: I could partly solve the issue by adding the following custom CSS (in 'Style' in the 'Look and feel' menu):
ul.labels li { 
 width: 9.0%!important;
}
However, I did need to remove the text I had included with the images in the labels for that to work.
Best,
Emma

Terms & ConditionsAccessibility statement