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

DaxDax Provo, UTFounding Community Member CEP (Chief Executive Paw-ficer)

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

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

Best Answers

  • MichelleCMichelleC East Lansing, MI Guru ✭✭
    Accepted Answer

    @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.

  • Accepted Answer

    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.

Answers

  • benmbenm Community Member Qubie ✭

    @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.

  • agolecagolec Community Member Qubie ✭

    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.

  • scjacksonscjackson MassachusettsCommunity Member Qubie ✭

    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.

  • [Deleted User][Deleted User] Qubie ✭
    edited February 14

    @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"});
    
  • Cesar234Cesar234 xCommunity Member Qubie ✭

    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?

Sign In to Comment