Question

I’m using the RefineSlide responsive slideshow and I can’t center it, it always sticks to the left of my page.

#slideshow{
position: relative;
width: 960px;
height:auto;
left: 50%;
margin-left: -480px;
}

I’ve tried adding the above to my CSS, and although this successfully centers it, it’s unfortunately no longer responsive as when I test on the iPhone the slideshow doesn’t fit to the screen.

#slideshow{
position: relative;
width: 100%;
height:auto;
}

When I style it like this, it is responsive… but sticks to the left. What do I need to change with this CSS to center it and keep it responsive?

Answer 1

It somewhat depends on your other markup, but in general this is enough:

#slideshow {
    margin: auto;
    width: Npx;
    /* also display: block if the element doesn't already have it */
}

Sample.