Slider height issue

[beno]

Hi,

I’ve just created my first slider as per the video. All is good except the slider height adjusts to the image height. The image isn’t vertically centered and the slider height doesn’t stay fix like is does in the video tutorial.

Is there a setting I’ve missed or do I need to fiddle with the css?

I can get around it by making sure the images are all the same dimension but I’d prefer if it worked like it does in the tutorial.

Any help would be appreciated.

Ben.

Topic

[Jason Bobich]

Hello,

Whether slider has a fixed height in certain scenarios just depends on the design of whatever theme. The slider in this theme doesn’t have a fixed height, but you could give it one with CSS customizations if you wanted. However, assuming your images for the slider are large enough (940×350 for full size and 530×312 for staged images), the slider will crop them automatically to the correct size, and so the size will be consistant throughout.

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

.flexslider .slides > li { height: ...; }

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[Author]

Replies