CODEWITHSUNDEEP
csszurb-foundation
kittymeows
kittymeows

Reputation: 183

Foundation Orbit

http://foundation.zurb.com/docs/components/orbit.html

I am trying to find where to reduce the height inside: 

<ul id="home-carousel" data-orbit="" data-options="slide_number:false;bullets:false;">

On inspect chrome, it shows style="height:500px". I also tried to override it using CSS with !important, but it doesn't work.

Any help is appreciated.

thanks

Upvotes: 1

Views: 113

Answers (2)

Jesus Lugo
Jesus Lugo

Reputation: 796

Most of slideshow resize the slideshow according to content images, if you need it to have a fixed height, try to restrict the image height via CSS:

.orbit-element img { max-height: 200px }

This will not distort images (because we're editing just the height), and the slideshow would use that maximum height to set the orbit one.

BTW, you cannot override the height because is set up as inline code via JavaScript

Upvotes: 0

Intellidroid
Intellidroid

Reputation: 1055

I believe Orbit automatically adjusts to the height of your images, and the html and styles are auto generated based on your image height. You possible solution would be to ensure all the images are the same dimensions.

Upvotes: 1

Related Questions