Menu icon Foundation
How do you contain Orbit's bullets to the carousel as it becomes responsive?

How do you contain the bullets to the Orbit carousel in F6.3 when the page becomes responsive?

There's a big gap between the carousel and the bullets as the page gets smaller -- the captions and bullets detach from the slider as it shrinks down.  

I'm using the basic Orbit code with the wrapper in Foundation 6.3 and my four images have the same dimensions

<div class="orbit" role="region" aria-label="#" data-orbit><ul class="orbit-container"><li class="orbit-slide"><nav class="orbit-bullets">

How do you contain the bullets to the Orbit carousel in F6.3 when the page becomes responsive?

There's a big gap between the carousel and the bullets as the page gets smaller -- the captions and bullets detach from the slider as it shrinks down.  

I'm using the basic Orbit code with the wrapper in Foundation 6.3 and my four images have the same dimensions

This post has been closed. No new replies can be added.

Rafi Benkual over 2 years ago

I'm not seeing this on the docs example. If you share an example we can help you more. Here is a blank Foundation codepen: http://codepen.io/rafibomb/pen/YVwrPN

Steve Juliusson over 2 years ago

OK, thanks; I put my code in codepen.

Steve Juliusson over 2 years ago

I got this to work by re-copying it; thank you.