How do I create a Full Screen image for a single question?

manresaclaramanresaclara San MateoCommunity Member Qubie ✭

How do I create a Full Screen image for a single question?

Sometimes, when you are testing for an advertisement or other large sized flat image, you will want to have the image show up on a full screen so that the participant can get a fair chance at viewing the full stimulus before asking them to rate the concept. But, if you are to update this in the header of your custom CSS under Look & Feel, it will alter the look of your multiple choice or other question types, which is also undesirable.
You actually do not have to alter the Look & Feel or use header CSS in Qualtrics to change the size for a single image.
Instead do the following steps:

  1. Open up the question that you want and click on the HTML view tab.
  2. Above the text, enter the following code:

Please click on the areas of this screen that you like the best. 
.Skin .SkinInner { max-width: 100%; margin: auto }

That's it! Setting the max-width to 100% just allows for it to be responsive to any screen size.

Happy testing!


Best Answer

  • manresaclaramanresaclara San Mateo Qubie ✭
    Accepted Answer

    Correction, because the code got messed up in my initial post.

    The CSS code is written as below:

    .Skin .SkinInner { width: 100%; max-width: 1600px; margin: auto }


Sign In to Comment