Problem with ACM Slideshow images re-sizing

jross

Hello, I am having a problem with the images within the ACM slideshow module re-sizing at different screen resolutions and and on iPhones. I am using the default size image that is 1920x960px. Everything looks great but when on a smartphone or my laptop resolution, I only see about 2/3rds of the image.
Your previous advise was to add this code into my custom.css file -
.acm-slideshow .owl-carousel .item .bg-item{background-size: contain !important;}
This solved the problem of not being able to see all the image but now the images is starting to repeat itself. Please see the attached screenshot.
Is there a css fix that will make the hero images 100% visible at all screen resolutions but without the repeating at lower screen sizes?

teitbite

jross Hi. Yes I'm afraid it will be either repeating or showing a black bar if we will disable repeating option with:

.acm-slideshow .owl-carousel .item .bg-item{
background-repeat: no-repeat !important;
}

This is why it was designed to cut parts of the image, to avoid that. But maybe try to cut smaller part of the image with this style:

.acm-slideshow .owl-carousel .item .bg-item{
background-size: cover !important;
background-position: center center;
}

jross

Hi sorry for the delay in responding. I've been traveling the past week.
When using the code to display the full image at smaller screen sizes, is it possible to designate the height of the slideshow background to match that of the image? ie 960px

.acm-slideshow .owl-carousel .item .bg-item{background-size: contain !important;}

That way the image should not repeat but would still be the right size at higher screen resolutions
Just a thought.
JR

teitbite

jross Hi. I'm afraid this type of slideshow will not fit to the image height on smaller screens, You can adjust it by adding a code with break points like for example:

@media only screen and (max-width:850px) {
.owl-carousel.owl-drag .owl-item {
    height: 400px;
}
}

@media only screen and (max-width:650px) {
.owl-carousel.owl-drag .owl-item {
    height: 320px;
}
}

etc...

jross

Ok, thanks I will give this a try
JR :-)

teitbite

jross Hi. Please let me know if it worked so I'll be able to close this thread or look for another solution.