How do I create a Full Screen image for a single question? | XM Community
Solved

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

  • 19 September 2018
  • 6 replies
  • 554 views
M
Badge
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:

<strong>Please click on the areas of this screen that you like the best. </strong>
<style type="text/css">.Skin .SkinInner {
max-width: 100%;
margin: auto
}
</style>

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

Happy testing!
icon

Best answer by manresaclara 19 September 2018, 19:34

View original

6 replies

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

The CSS code is written as below:

<style>
.Skin .SkinInner {
width: 100%;
max-width: 1600px;
margin: auto
}
</style>
NiC
Rank
Userlevel 7
Badge +27
Hi @manresaclara
Thank you for sharing that 🙂
XM Engineer | Zill Consulting
M
Badge
@NiC_Ugam you are welcome. Please let me know if you find this useful.
R
Rank
Userlevel 5
Badge +11
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 <style> and </style> 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
M
Badge
@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 }
R
Rank
Userlevel 5
Badge +11
@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

!

Leave a Reply


Terms & Conditions