[PyanfarParticipant]

Greetings. I’m hoping for some guidance on how to address this formatting issue. I’ve created a slider with the CS element, and the images in the slider are different sizes. For example, a caption for one is longer than another, or the jpg is slightly longer. As the images transition, the sections below move up and down, creating an odd effect that gets more pronounced the smaller the display.

What’s the best way to address this: ensure all the output is exactly the same size so the container has no reason to grow and contract? Or create a css class to tweak x-flex-slider that sets the container to a fixed height (without losing responsiveness)? Or …?

Suggestions on approach that works best with Integrity Light/Cornerstone greatly appreciated.

[LelyModerator]

Hi There,

Thanks for posting in. Can you try adding this custom CSS on Appearance > Customize > Custom > Edit Global CSS:

.site .x-flexslider {
    overflow: hidden;
}

If this doesn’t work, please do share your page URL where the issue is so we can check further.

[PyanfarParticipant]

It doesn’t seem to have an effect.

Inspect Element shows the height parameter for the container to be dynamically changing as each image is recycled. I’ve uploaded 2 screen shots with the height element circled. In #1 the transition between slides is underway. In the second I caught it exactly at the beginning (or end) of the next loop. You can see that the height has changed – and the overflow: hidden command isn’t there. It immediately returns as soon as the transition begins.

For what it’s worth, I’ve tried container/no container and turning off the slideshow in favor of prev/next navigation, but as soon as the transition is triggered by any means, the section below moves up or down in response as well.

I’m developing on my localhost so I can’t share a URL yet. But if you have any other ideas I’ll give them a try.

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> CSS :

li.x-slide {
    height: 200px;
    overflow: hidden;
}

Hope that helps.

[PyanfarParticipant]

Thank you! That certainly helps – at about 350px most of responsive views show most of the image. But there is definitely image cropping (picture attached). I tried adding

width: auto;

hoping that if the height was fixed, then the width would vary instead of the image being cropped but that didn’t work. Is there a further refinement that will force a resize to a fixed height instead of cropping?

[ChristianModerator]

Please change the code given previously with:

@media (min-width: 768px) {
    .x-flexslider .x-slides img {
        width: auto !important;
        height: 350px;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .x-slide {
        height: 350px;
        display: table-cell;
    }

    .x-flexslider .x-slides img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
}

View post on imgur.com

Hope that helps. 🙂

[PyanfarParticipant]

Thank you for your persistence. Unfortunately, that separates the caption and the image from each other, and the images then cover text above them in small displays and lose their aspect ratio in large ones.

[LelyModerator]

Hello There,

To make the image stay below the slider main image, please update above to this:

@media (min-width: 768px) {
    .x-flexslider .x-slides img {
        width: auto !important;
        height: 350px;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .x-slide {
        height: 350px;
        display: table-cell;
    }

    .x-flexslider .x-slides img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .x-flexslider .x-slides .wp-caption-text {
       position: absolute;
       bottom: 0;
       z-index: 9999;
    }
}

If this doesn’t work. it would be better if you will setup a staging site so we can directly. Then give us a screenshot of what you want to achieve.

[Author]

Posts