How to set width of responsive carousel?

Question

I am developing a website with carousel slider but carousal slider goes to the outside external div. It is because of carousel Slider takes dynamic width with related to screen resolution. Should anybody help me to fix it. What i done is here : http://code-dynamix.com/blazemedia/fdfs.html

The problem in the above link is in division above the footer. Thanks in advance.

Answer 1

You want the overflow: hidden; in your div class (.upcoming) this would hide anything outside the box

Answer 2

Please try this

.upcoming{
overflow: hidden; /* inside overflow:hidden; in main div */
}
.caroufredsel_wrapper{
  overflow: hidden;
  left: 126px;
}

Answer 3

Add width 100% for caroufredsel_wrapper class, overflow: hidden for .upcoming div. That is

.caroufredsel_wrapper {
    width : 100% !important; 

}

.upcoming {
    overflow: hidden;
}

in css file.

Thanks.

Answer 4

• Try setting the width to 100%.

 <div id="wrapper"> <div id="carousel"> <div><img src="img" /></div> <div><img src="img" /></div> <div><img src="img" /></div> <div><img src="img" /></div> </div> <div id="title"> <h3>Header</h3> <p><a href="#">Link Name</a></p> </div> <div id="pager"></div> </div> 

Answer 5

Problem is this : you have given inline-css to the divs...

width:510px; height:396px; background:url(images/Layer61new.png); position:absolute;

so no water whatever you give in the css, inline-css would always over-write the width and height coming from the css

How to recover? Remove all the inline css if you want a responsive stuff and play with width and height through your css....because on resizing....your stuffs are getting hidden withouth resizing.... this is not responsive thing, its just hiding the mess :)