Question

I am using wordpress as my CMS, and have used a theme of my choice. The theme shows a slider (carousel) on the home page, but takes up too much space. I tried to edit the width and height to be 80%, but the UI gets screwed. The slider does not center, or the frame with the left right arrows come closer. The image gets smashed. I need to get the css right for this.

I tried the following

1. modified width and height to 80%
2. reduced the px values, messed it up further

Below I have relevant css and html portions of the code.

<div id="slides">
  <div class="slides_container slide" style="overflow: hidden; position: relative; display: block;">
    <div class="slides_control" style="position: relative; width: 2736px; height: 480px; left: -912px;"><div style="position: absolute; top: 0px; left: 912px; z-index: 5;">
       <a href=""><img src="http://localhost/taxeeta/wp-content/uploads/2013/01/116.png?1358343444279" alt=""></a>
    </div>
    <div style="position: absolute; top: 0px; left: 912px; z-index: 0; display: none;">
       <a href=""><img src="http://localhost/taxeeta/wp-content/uploads/2013/01/215.png" alt=""></a>
    </div>
  </div>
</div>

CSS:

#slides {
 position: absolute;
 top: 15px;
 left: 0px;
 z-index: 100;
 width: 897px;
 margin-left: 14px;
}

.slides_container {
 width: 912px;
 margin: 0;
 padding: 0;
}

.slides_control {
 position: absolute;
 top: 15px;
 left: 0px;
 z-index: 100;
 width: 897px;
 margin-left: 14px;
}

Answer 1

Are you sure that there is jo javascript code modifying the element-css?
Did you changes the width of slides and slides_control as the same?
(sorry iam not able to write comments…)