Search code examples
javascripthtmlcsssurveyqualtrics

Custom CSS (Qualtrics)

I am new to custom CSS. My boss wants me to add Custom CSS in Qualtrics(under Look and Feel/Advanced). Everything seems to format fine in the edit preview window, but on the actual survey page the formatting for many elements is not applied:images are original size, div's are not visible, etc.

I'm assuming this has something to do with individual browsers, something I must specify such as a webkit thing, but I don't understand it too well. Here is a simple piece of my code(images are my biggest concern):

HTML:

<img id="bing" src="http://i39.tinypic.com/16kc3k0.jpg">;

CSS:

#bing{
    display:block;
    width:15%;
    height:15%;
    }

I know there's some attributes such as 

-webkit-appearance: cover;
 -moz-appearance: cover;
Solution

  • read this Percentage Height HTML 5/CSS

    "If you want to make the div height a percentage of the viewport height, every ancestor of the div, including and , have to have height: 100%, so there is a chain of explicit percentage heights down to the div."

    if you are having problem with the tool, try to add inline style by writing

    <img id="bing" style="display:block; width:15%; height:15%; " src="http://i39.tinypic.com/16kc3k0.jpg">;

    EDIT: One should really the styling in the CSS. figure out your tool to do so and find out any other problem that is not letting you do so..