Ehtos Post Slider is cropping/clipping image

[JonFrancisThompson]

Hi All,

I’m needing to get the Ethos post-slider to display my image as full size, but it keeps cropping and clipping my image. I’ve tried resizing to various different sizes but the image is always displayed the same way. How can I get the image to display fully without cropping or clipping?

[paul.r]

Hi,

Ethos post slider background are set to cover which means to resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.

You can try to set to contain but there will be some empty space that will not be covered by your image.

You can try adding the code below in Theme Options > CSS

.x-post-slider-entry {
     background-size:contain !important;
}

https://www.w3schools.com/cssref/css3_pr_background-size.asp

Another way is to do trial and error, resize your images until you get your desired outcome.

Thanks

[JonFrancisThompson]

@paul.r

.x-post-slider-entry {
background-size:contain !important;
}

Hi, thanks for your reply. So the contain idea works, but it seems like I lose some responsiveness in the theme as a result. Can you tell me what dimension image would work best to show the full image and keep total responsiveness for all resolutions in the post slider?

[Prasant]

Hello @JonFrancisThompson,

Thanks for updating the thread.

Regarding the responsives, please add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
   .x-post-slider .x-post-slider-entry, .archive .x-post-slider .x-post-slider-entry {
    padding-bottom: 45% !important;
}
}

You can upload a image of around 850px * 500px and see how it goes.

If you would like to learn CSS, please take a look at following resource:

https://www.w3schools.com/css/

Thanks.