Solved
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:
<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!
Best answer by manresaclara
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>
View originalCorrection, 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>
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
@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 }
@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
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.