Menu icon Foundation
Orbit container height doesn't shrink

I downloaded the Marketing template from the Foundation website and began to customize the code offline. When I previewed the template and shrank the browser window, the image's width and height shrank but the orbit container's height did not change, leaving a gap between its row and the row below it.

In foundation.css, I changed the height to auto, then I tried to change the UL contained in orbit-container to auto, but this did not work.

Thank you for your assistance.

Orbit container height

<div class="row">
     <div class="small-12 small-centered medium-12 medium-centered large-12 large-centered columns">

	 	  <div class="orbit-container">
              <ul style="height: 388px;" class="example-orbit orbit-slides-container swipe-next" data-orbit="">
              <li style="" class=""><img src="Foundation%20Template%20_%20Orbit%20Home_files/1000x400text%2520img%25201.gif"></li>
              <li class="" style=""><img src="Foundation%20Template%20_%20Orbit%20Home_files/1000x400text%2520img%25202.gif"></li>
              <li class="active" style=""><img src="Foundation%20Template%20_%20Orbit%20Home_files/1000x400text%2520img%25203.gif"></li>
              </ul><a class="orbit-prev" href="#"><span></span></a><a class="orbit-next" href="#"><span></span></a>

			  <div class="orbit-timer paused"><span></span>

			  <div style="width: 0%;" class="orbit-progress"></div>
	     </div>

<div class="orbit-slide-number"><span>3</span> of <span>3</span></div>

<div class="orbit-bullets-container"><ol class="orbit-bullets"><li class="" data-orbit-slide="0"></li><li class="" data-orbit-slide="1"></li><li class="active" data-orbit-slide="2"></li></ol></div>

</div>
</div>
            

         

.orbit-container {
  overflow: hidden;
  width: 100%;
  height: auto;
  position: relative;
  background: none; }

         

Orbitsliderheightadjustment

I downloaded the Marketing template from the Foundation website and began to customize the code offline. When I previewed the template and shrank the browser window, the image's width and height shrank but the orbit container's height did not change, leaving a gap between its row and the row below it.

In foundation.css, I changed the height to auto, then I tried to change the UL contained in orbit-container to auto, but this did not work.

Thank you for your assistance.

Orbit container height

<div class="row">
     <div class="small-12 small-centered medium-12 medium-centered large-12 large-centered columns">

	 	  <div class="orbit-container">
              <ul style="height: 388px;" class="example-orbit orbit-slides-container swipe-next" data-orbit="">
              <li style="" class=""><img src="Foundation%20Template%20_%20Orbit%20Home_files/1000x400text%2520img%25201.gif"></li>
              <li class="" style=""><img src="Foundation%20Template%20_%20Orbit%20Home_files/1000x400text%2520img%25202.gif"></li>
              <li class="active" style=""><img src="Foundation%20Template%20_%20Orbit%20Home_files/1000x400text%2520img%25203.gif"></li>
              </ul><a class="orbit-prev" href="#"><span></span></a><a class="orbit-next" href="#"><span></span></a>

			  <div class="orbit-timer paused"><span></span>

			  <div style="width: 0%;" class="orbit-progress"></div>
	     </div>

<div class="orbit-slide-number"><span>3</span> of <span>3</span></div>

<div class="orbit-bullets-container"><ol class="orbit-bullets"><li class="" data-orbit-slide="0"></li><li class="" data-orbit-slide="1"></li><li class="active" data-orbit-slide="2"></li></ol></div>

</div>
</div>
            

         

.orbit-container {
  overflow: hidden;
  width: 100%;
  height: auto;
  position: relative;
  background: none; }

         
Nic Edwards about 5 years ago

You have a couple of things going on:

  1. When altering the CSS, you should create a separate personal stylesheet because if you update your foundation.css file it will delete any of the custom CSS that you added.

  2. The "centered" class is unnecessary when you have a 12 column row since it's already centered by default.

  3. It seems like your custom css is unnecessary if you're trying to load an orbit slider on a small screen. By default it loads a static image, but you can delete the "hide-for-small" (on the orbit slider) class as well as the code for the img that has the "show-for-small" class.

Hope that helps!