CODEWITHSUNDEEP
csszurb-foundationorbit
Tim G
Tim G

Reputation: 1822

when using zurb foundation orbit slider, how to center slides

as shown in this screenshot: extra wide screen causes background to show through on my 24" monitor the white background shows through my orbit slider. This is because my source image is narrower (in pixels) than the browser window's width.

If I make my window narrower, the image scales down as one would expect, without any background showing through: no background when window is 1600px wide or narrower

What I would like to accomplish is to center the <li> elements that make up the slides so that when the image is narrower it won't have dumb looking white stripe on one side. browser inspector showing ul/li elements

Upvotes: 0

Views: 2211

Answers (1)

CodeOut
CodeOut

Reputation: 117

Try this:

Set up a class of full_width with the following style:

.full_width {
    width:100%;}

Add this class to the orbit ul:

<ul class="full_width" data-orbit data-options="...">
   <li><img src="img/slider/slide1.png"></li>
   <li><img src="img/slider/slide2.png"></li>
   <li><img src="img/slider/slide3.png"></li>
   <li><img src="img/slider/slide4.png"></li>
</ul>

Then in your style sheet add a class of full_width li img and set the width of your images and add margin: 0 auto like:

.full_width li img {
    width:960px;
    margin:0 auto;}

Upvotes: 3

Related Questions