0

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;
655321
  • 411
  • 4
  • 26
jcaso
  • 69
  • 1
  • 7

1 Answers1

0

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

Community
  • 1
  • 1
Tauseef
  • 2,035
  • 18
  • 17
  • I don't believe it is HTML 5. The way it works is you copy and paste the HTML into the header and put the custom CSS into a separate window. I don't know how to add HTML to the CSS box or I would. http://oi41.tinypic.com/3309zq0.jpg – jcaso Oct 06 '13 at 13:53
  • if you are having problem with the tool, try to add inline style by writing as edited above in my answer. please mark as helpful if it helps. – Tauseef Oct 06 '13 at 13:59
  • 1
    That did work! However I would really like to do it without inline. Is this possible? – jcaso Oct 06 '13 at 14:10
  • I haven't used that tool actually. but I think you can do that by clicking `add custom CSS` and write the `#bing{...}` there. please mark my answers and comments as helpful :) upvotes. thanks. – Tauseef Oct 06 '13 at 14:14
  • Yes I marked it :) Thanks. I added in the code there, it's the CSS I showed above. I don't understand why it isn't working!! :( – jcaso Oct 06 '13 at 14:16
  • Figured it out. It was ignoring my file because of a comment on the top! Well that was ridiculous.. thank you so much! – jcaso Oct 06 '13 at 14:41
  • Glad to know that you figured it out. – Tauseef Oct 06 '13 at 14:42
  • @MrLister Kindly up vote my answer because I have edited my answer to remove mistake and It did help out the guy in trouble. thanks. – Tauseef Oct 07 '13 at 06:56