Pictures in CBC

Question

Hi all,

Is there a way in which you can enlarge the display of the images in a CBC on the desktop version, without harming the visibility of the images when viewing the choice tasks on a mobile phone? By default, the display of the images in the desktop version is quite small (in fact, too small). However, if I try to enlarge it, the images get too large for the mobile view (you can only see a small part of the images).

I tried to fix it by setting the Question Width and Task Width to 1000 pixels.
 This works if respondents will open the questionnaire on their PC, but does not work if respondents will open the questionnaire on their phone. Is there a solution to ensure good visibility of the images for both the desktop version and the mobile phone version?

Comments

It's possible to use CSS to apply styling only for certain screen widths (we usually use 800px as the desktop/mobile cutoff).  Does adding this to your exercise help?

<style>
@media only screen and (min-width: 800px) {
    #[% QuestionName() %]_div {
        width: 1000px;
    }
}
</style>

---

Hey Zachary,

Thanks for your answer. Could you explain to me where exactly I have to place this code in the CBC?

---

Just about anywhere in the exercise ought to work.  I think most users commonly place code in question footers as a convention, though.

---

Thank you very much, this is indeed what I was looking for!