Menu icon Foundation
Foundation 5, Orbit panels offset

Offset orbit

Here's the problem. Using Foundation 5 (which I've upgraded from 4) and Orbit, with minimal HTML that was taken directly from the documentation, I'm getting my images and captions offset down the page and it is setting a really large height. Here's the original code:

`<div class="stripe feature-well">
    <div class="row">
		<div class="columns large-12">
			<ul data-orbit>
				<li>
					<img src="//placehold.it/1000x200/21516b/ffffff&text=Placeholder1" alt="slide 1" />
					<div class="orbit-caption"> Caption One. </div>
				</li>
				<li>
					<img src="//placehold.it/1000x200/21516b/ffffff&text=Placeholder2" alt="slide 2" />
					<div class="orbit-caption"> Caption Two. </div>
				</li>
				<li>
					<img src="//placehold.it/1000x200/21516b/ffffff&text=Placeholder3" alt="slide 3" />
					<div class="orbit-caption"> Caption Three. </div>
				</li>
			</ul>
		</div>
	</div>
</div>
            

         

Here's the resulting code:

<div class="orbit-container"><ul data-orbit="" class="orbit-slides-container" style="height: 194px;">
    			<li class="active">
					<img alt="slide 1" src="//placehold.it/1000x200/21516b/ffffff&amp;text=Placeholder1">
					<div class="orbit-caption"> Caption One. </div>
				</li>
				<li>
					<img alt="slide 2" src="//placehold.it/1000x200/21516b/ffffff&amp;text=Placeholder2">
					<div class="orbit-caption"> Caption Two. </div>
				</li>
				<li>
					<img alt="slide 3" src="//placehold.it/1000x200/21516b/ffffff&amp;text=Placeholder3">
					<div class="orbit-caption"> Caption Three. </div>
				</li>
			</ul><a href="#" class="orbit-prev"><span></span></a><a href="#" class="orbit-next"><span></span></a><div class="orbit-timer paused"><span></span><div class="orbit-progress" style="width: 60.26%;"></div></div><div class="orbit-slide-number"><span>1</span> of <span>3</span></div><div class="orbit-bullets-container"><ol class="orbit-bullets"><li data-orbit-slide="0" class="active"></li><li data-orbit-slide="1"></li><li data-orbit-slide="2"></li></ol></div></div>

Orbitstylingalign

Offset orbit

Here's the problem. Using Foundation 5 (which I've upgraded from 4) and Orbit, with minimal HTML that was taken directly from the documentation, I'm getting my images and captions offset down the page and it is setting a really large height. Here's the original code:

`<div class="stripe feature-well">
    <div class="row">
		<div class="columns large-12">
			<ul data-orbit>
				<li>
					<img src="//placehold.it/1000x200/21516b/ffffff&text=Placeholder1" alt="slide 1" />
					<div class="orbit-caption"> Caption One. </div>
				</li>
				<li>
					<img src="//placehold.it/1000x200/21516b/ffffff&text=Placeholder2" alt="slide 2" />
					<div class="orbit-caption"> Caption Two. </div>
				</li>
				<li>
					<img src="//placehold.it/1000x200/21516b/ffffff&text=Placeholder3" alt="slide 3" />
					<div class="orbit-caption"> Caption Three. </div>
				</li>
			</ul>
		</div>
	</div>
</div>
            

         

Here's the resulting code:

<div class="orbit-container"><ul data-orbit="" class="orbit-slides-container" style="height: 194px;">
    			<li class="active">
					<img alt="slide 1" src="//placehold.it/1000x200/21516b/ffffff&amp;text=Placeholder1">
					<div class="orbit-caption"> Caption One. </div>
				</li>
				<li>
					<img alt="slide 2" src="//placehold.it/1000x200/21516b/ffffff&amp;text=Placeholder2">
					<div class="orbit-caption"> Caption Two. </div>
				</li>
				<li>
					<img alt="slide 3" src="//placehold.it/1000x200/21516b/ffffff&amp;text=Placeholder3">
					<div class="orbit-caption"> Caption Three. </div>
				</li>
			</ul><a href="#" class="orbit-prev"><span></span></a><a href="#" class="orbit-next"><span></span></a><div class="orbit-timer paused"><span></span><div class="orbit-progress" style="width: 60.26%;"></div></div><div class="orbit-slide-number"><span>1</span> of <span>3</span></div><div class="orbit-bullets-container"><ol class="orbit-bullets"><li data-orbit-slide="0" class="active"></li><li data-orbit-slide="1"></li><li data-orbit-slide="2"></li></ol></div></div>
Tom Belknap over 5 years ago

Can I get a response if I give this a bump?