Vertically align slideshow images at top

Beaver Builder
1

I have a BB slideshow with 20 images of different heights. By default the slideshow module vertically centers the images, but I’d like to align all images with the top of the slideshow module instead. Is this possible, perhaps with some CSS tweaks to fl-slideshow-container or fl-slideshow-module?

2

Hey Steve,

Could you tell us a little more about the problem that you’re having? Do you mind sharing some screenshots so we can take a look? You can upload it to imgur and paste the link here. Or if you can share the URL of the site we’ll be glad to take a look.

Thanks!

KC

3

The site isn’t online yet, but it’s not a problem per se. I just want to change the default behavior.

I have some images that range in height between 250 and 500 pixels, so I created a BB slideshow to rotate through them. The slideshow works fine, but by default it vertically centers each image within the 500-pixel height area (if I use 500 pixels for the default slideshow height).

So the images might look like this as they rotate (assuming I have a tall image, then a short image that’s centered in the same area):

XXX
XXX XXX
XXX XXX
XXX

I want it to look like this instead (having the tops of the images aligned as they rotate):

XXX XXX
XXX XXX
XXX
XXX

4

Hey Steve,

Try using the CSS snippet below and see if it works! This applies to all slideshows. If you want to target specific ones, just add a class to the module and add it before the selector below.

.fl-slideshow-image-img {
  top: 0px !important;
}

Ben

5

That works perfectly. Thanks, Ben!