Foundation 4 - full width Orbit but with a max height

Question

I have an Orbit slideshow on my homepage here: Home page

Unlike the rest of the content it is not contained in a row class as I would like it to take up the full width of the screen. I would also like there to be a max height set, so that the slideshow doesn't take up too much vertical space on larger screens. To do this I have set the following in my custom stylesheet:

.orbit-container {
    max-height: 400px;
}
.orbit-container .orbit-slides-container img {
    width: 100%;
}

However, the captions and bullets are being 'hidden'. Is there a way to achieve my desired effect while still having the bullets and captions appear at the bottom of the orbit container?

Any advice would be greatly appreciated.

Thanks, Rachel

P.S. I'm using Foundation version 4.

I think I may have answered my own question. For anyone else who may find this useful (ignoring the CSS above): .orbit-container ul li { max-height: 400px; overflow: hidden; } .orbit-container ul li img { width: 100%; } Not sure if it's the most elegant way, so if anybody else has any suggestions, it'd be great to hear them. Thanks. — rachm

TheAngryApe TheAngryApe · Accepted Answer · 2013-08-07T09:58:19

In your custom stylesheet make sure you put a z-index on your caption box and bullets

This will bring your elements to the front

E.G

ol.orbit-bullets{
    z-index:5000;
}

Foundation 4 - full width Orbit but with a max height

1 Answers