Slideshow Vertically Align Images

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

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

    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?

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

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?


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.

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 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.

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!