Slideshow Vertically Align Images

Beaver Builder
1

I’ve created a small slideshow with just 2 images here:

http://interculturaltulsa.org/projects/

Unfortunately, it appears that the frame containing the images is centering them vertically. I’ve tried adding a custom class:

.align-top{
    vertical-align: text-top;
}

I’m seeing some other css solutions out there, but I’d like to know if you all know of a tried and true method to use with this content module. Any thoughts?

2

sorry, meant to say it’s vertically aligning them along the center.

3

Hi Jason,

Can you add the following CSS and see if this resolves your issue.

@media (min-width: 768px) {
  .fl-slideshow-content {
    -webkit-transform: translateY(-115px);
            transform: translateY(-115px);
  }
}

If it doesn’t, can you provide temp admin access, please?

Thanks,
Danny

4

Not ideal, but I chose to crop the images to 16:9 and set a module height of 275. It works, but a top align seems to be a needed parameter to the module.

5

Hey Jason,

I find that editing the images being used before uploading them is the best way around issues like these, no matter the slider used. But yeah, adding a position setting to ours might help. If you’ve a minute, feel free to add this as a feature request on our User Voice. That’s where we keep track of all feature requests so they don’t get lost here in the forums. :slight_smile:

Ben

6

@ben yeah, I figured the same thing. I cropped my images according to a 4:3 aspect ratio before adding them to the slideshow. Would you recommend a different approach? Different aspect ratio? Consistent sizing?

I’ll submit a User Voice request.

7

Hey Jason,

Thanks for submitting the request! :slight_smile:

The aspect ratio or size of the images totally depends on how you’re using the slider. What I normally do is just slap the images to the slider, adjust the settings as to how I want it to be, then view it on the frontend. I then get the size it gets rendered, resize the images accordingly, then reupload them.

And yes, I would suggest having a consistent size for all of the images on the slide.

Hope this helps!

Ben