Question

I have a slight issue, keeping the content in my carousel in place when i increase my screen size beyond 1200px content pushes to the left hand side of the screen click here

I’ve nested the carousel in it’s own wrapper and given it the following css properties

.carsousel-container{
    position: relative;
    width: 100%;
}   

.carousel{
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    min-width: 320px;
    position: absolute;
}
.carousel-bg{
    margin-top: -542px;
}

.left-side{
    margin: -487px 40px;
}

#shots-carousel{
    width: 90%;
    margin: 46px 13%;
    position: absolute;
    max-width: 1600px;
}

Does anyone know what is causing this issue, i’ve come across it before, managed to fix it but don’t no how i did it. Can someone kindly pin-point me where i’m going wrong so i can save time in future.

Answer 1

That was challenging! Interesting styles you’re using there. This fixes it:

Get rid of the clearfix class on carousel, and change position:absolute to position:relative

You’ll need to do the same sort of thing on .rslides_tabs