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!

Tagged:

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 }

Answers

  • NiCNiC MumbaiCommunity Member Superuser ✭✭✭✭

    Hi @manresaclara
    Thank you for sharing that :)

  • manresaclaramanresaclara San MateoCommunity Member Qubie ✭

    @NiC_Ugam you are welcome. Please let me know if you find this useful.

  • Rod_PestellRod_Pestell Hemel HempsteadCommunity Member Qubie ✭

    Hi @manresaclara,

    I can't get this to work, I've inserted a Rich Text field, added an image from the library, then gone into the HTML code and added the line putting and either side. This is the resulting code:

    <"style> .Skin .SkinInner { max-width: 100%; margin: auto } <"/style>
    <"img src="https://warnerhotels.eu.qualtrics.com/CP/Graphic.php?IM=IM_6mRrDoT4qC5XpGd" style="width: 1101px; height: 825px;" />

    (Please ignore the " preceding 'img' and '/style' as this is to stop the code being parsed. I thought there was a way to insert code as text into these comment boxes but perhaps not?!)

    Please can someone advise as I am new to writing HTML and CSS?

    Thanks

    Rod Pestell

  • manresaclaramanresaclara San MateoCommunity Member Qubie ✭

    @Rod_Pestell
    The max-width property is to define what is the maximum that the window should be allowed, and so if you set it to 100%, it is basically doing the same as it was before.

    Please try this code and see if it works for you.
    .Skin .SkinInner { width: 100%; max-width: 1600px; margin: auto }

  • Rod_PestellRod_Pestell Hemel HempsteadCommunity Member Qubie ✭

    @manresaclara , thanks for the reply. I've also been struggling with the syntax and have learnt a few things today which may help. I should be writing the syntax like:

    <style type="text/css"> img { width: 100%; max-width: 600px; margin: auto } </style>
    <img src="https://warnerhotels.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1N3EbDQtdfCCvpX" />
    

    Changing the max-width value seems to vary the size of the image but anything greater than 600px makes no difference. FYI the image I am using is 825 x 1101. So it looks like it's being restricted by the theme or some other style?

    I then tried swapping out img with .skin .skininner but it's not working as the image wouldn't change size even if you drop max-width to 300px.

    <style type="text/css"> .skin .skininner { width: 100%; max-width: 1600px; margin: auto } </style>
    <img src="https://warnerhotels.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1N3EbDQtdfCCvpX" />
    

    I don't think the syntax is right of the above code, can you advice? I'm hoping that using the .skin .skininner route will make the image bigger than 600px?

    I also inspected the page and could see that the image is being restricted by the QuestionText Border. So I would like the image to simply overlay and cover up anything that maybe there, even the top title (See below image)

    Thanks

    Rod Pestell

Sign In to Comment