How do I make the survey wider so it can accommodate images? | XM Community
Solved

How do I make the survey wider so it can accommodate images?

  • 8 December 2017
  • 9 replies
  • 1039 views

Userlevel 4
Badge +2
  • Qualtrics Employee
  • 23 replies
How do I make the survey wider so it can accommodate images?
icon

Best answer by MichelleC 11 December 2017, 17:38

View original

9 replies

Userlevel 5
Badge +10
@dax, you may want to consider making your images smaller. There is a 16MB limit to graphic file size and in addition to that, a large graphic can cause a LOT of issues for your mobile users. The Help documents here recommend keeping graphics under 1MB as a best practice for a good user experience.
Userlevel 3
Badge +4
Go to Survey
Click Look&Feel and Advanced
Click add custom CSS

Add following:

.Skin .SkinInner {min-width: 1200px!important;}

You can of course adjust the 1200 px to whatever you want.
@Dax @AbdulDezkam's solution is a good one. But as @MichelleC says consider your audience. Depending on how rigorous you need to be, if your desktop and mobile users are getting a different experience you may not be able to validly combine the data from both sets of participants.
Userlevel 1
How can I make this work for matrix - likert scales too?

I'm using classic design but all my matrix questions have messed up labels or show up with scrolls.
Is there JS code that can make just one page wider? I would like to accomodate a large image, but the rest of the survey can be normal width.
> @scjackson said:
> Is there JS code that can make just one page wider? I would like to accomodate a large image, but the rest of the survey can be normal width.

Paste the below code in JS of any of the question of the page, where you want to accommodate the large image

jQuery(".Skin .SkinInner").css({"min-width": "1200px"});
I have tried adding jQuery(".Skin .SkinInner").css({"min-width": "90%"});
To avoid scaling the width on mobile as well. This seems to work, but I am not sure if this has any other drawbacks. Do anyone else have any experience with this?

Hello everyone,

I've tried adding "
jQuery(".Skin .SkinInner").css({"min-width": "1200px"});
To my JS script for a matrix table but it is still all squished to one side.
In my .CSS code I have specified this min length too. The next button appears centralised and in the middle but all my matrix and questions are over to the left with lots of empty space on the right that I would like to spread the question across.
Screenshot 2020-04-17 at 15.22.09.png
Thanks in advance for you time!

Badge +1

https://community.qualtrics.com/XMcommunity/discussion/comment/714#Comment_714So this worked perfectly for me except that I only want to expand the width for the web version of my survey, not the mobile. Is there any way to achieve this through CSS?

Leave a Reply