Menu icon Foundation
Orbit Caption CSS Positioning

Hi,

I'm a newcomer to Foundation, using v5, and am really excited about all of the options. I'm banging my head against the wall trying to figure out a piece of functionality that I know I'm going to be using a lot in upcoming projects and in one I'm working on right now. This is positioning the captions of the Orbit slider.

By default it is positioned absolutely to bottom:0 with 100% width. But, I've been trying to make the caption box smaller and offset it from the bottom right edge of the slider-container to no avail. Changing the width of the box is easy enough, but moving it away from the bottom has not happened for me yet. I've tried changing .orbit-caption to bottom:20px or a % or from the top. But, it seems like since the height of the imgs and therefore the container is not a static value, it can't calculate that distance or something. The second puzzle is that I would like this caption to stay within the bounds of a .row div, so that the background image is 100% width, but the caption will stay centered within the max-width I've set - I don't want my captions flying all the way off to the side on large screens.

I'd also like to be able to place the bullets underneath the captions, but that seems like a tall order, so I'm just focusing on the caption position for now.

Any insight would be greatly appreciated!

Brendan

Orbitslidercaption

Hi,

I'm a newcomer to Foundation, using v5, and am really excited about all of the options. I'm banging my head against the wall trying to figure out a piece of functionality that I know I'm going to be using a lot in upcoming projects and in one I'm working on right now. This is positioning the captions of the Orbit slider.

By default it is positioned absolutely to bottom:0 with 100% width. But, I've been trying to make the caption box smaller and offset it from the bottom right edge of the slider-container to no avail. Changing the width of the box is easy enough, but moving it away from the bottom has not happened for me yet. I've tried changing .orbit-caption to bottom:20px or a % or from the top. But, it seems like since the height of the imgs and therefore the container is not a static value, it can't calculate that distance or something. The second puzzle is that I would like this caption to stay within the bounds of a .row div, so that the background image is 100% width, but the caption will stay centered within the max-width I've set - I don't want my captions flying all the way off to the side on large screens.

I'd also like to be able to place the bullets underneath the captions, but that seems like a tall order, so I'm just focusing on the caption position for now.

Any insight would be greatly appreciated!

Brendan

Ghaida Zahran almost 6 years ago

Hey Brendan,
To effectively override caption styles you'll need to be pretty specific with your CSS declarations. Check out the example here:
http://cdpn.io/kcJrx

Simon Borowski over 5 years ago

Just redefine CSS rules for orbit-caption:

.orbit-container .orbit-slides-container li .orbit-caption{
bottom:0;
right:0;
width:30%;

}