3d carousel css problems

I have a 3d carousel i'm working on as an option to the one i posted in the javascript area. It has nearly everything i want except it isn't responsive design and the carousel images are not linkable. what am i missing? i keep encountering this in 3d carousels.

here's the script (the description of it)
http://www.joezimjs.com/javascript/h...nd-roundabout/

the actual demo
http://www.joezimjs.com/demos/roundabout-demo/

i solved the image link problem with this

Code:

---

<script>function imageClick(url) {
    window.location = url;
}</script>

---

and then put this in the image tag

Code:

---

onclick="imageClick('http://etc... ')"

---

any suggestions on how to make it responsive? i put a background image behind the carousel, but to do so, i had to make it a normal image src at the top of the body, with 100% width, and then make another div with absolute positioning to position the carousel on top of the background. i am not sure but that may have fudged up the ability to make it responsive, since i had to nest the carousel div inside the new div to position it? i dunno, i have a suspicion it's the css for height and width as some of the parameters are resisting change into percentage. for some reason, it wouldn't let me put the background image in the css. it acted like i hadn't made any changes. this is the css for the background. i have removed the background image from it, since it wasn't showing up. is it overriding the background image?

Code:

---

body{background:#000C3A; color:#eee;}

---

i set several of the parameters as percentages but some just don't want to be anything but pixels. for example

Code:

---

#carousel-descriptions {
                        list-style:none;
                        display:block;
                        width:850px;
                        margin:1% auto;
                        padding:0;

---

if i touch the 850px the whole carousel becomes thin and stretched out, even at 100% or even very small, like 20%. i gave the images themselves, in their image tags, a percentage width, but that is being overridden by the styling for the image holders, i think. so the carousel images are not responsive as a result because the css for the image holders is also in px and becomes thin and stretched when i change it to percentage. i can set the width in pct but not the height.
here it is

Code:

---

.roundabout-holder {
                        padding: 0;
                        height:395px;
                        width: 70%;
                        margin: 0 auto;

---

what's causing that? i have tinkered with all the parameters in an attempt to isolate the culprit, but i'm stumped.

what's the easiest way to make this image carousel responsive? it's a mix of css and javascript but all the parameters are in px not %.
http://www.joezimjs.com/demos/roundabout-demo/