Change size of slider images

I’d like to be able to change the sizes of the images in the slider. I’ve created several images that are 300x250px, and was able to put them in thereand make them look good with the following:

.owl-carousel .owl-item .item{
width: 300px !important;
height: 250px !important;
}
.roll-posts-carousel .item .text-over {
right:50px!important;
}

However, I’d like to be able to go a bit smaller with these images. I’d like to have 260x216px images in here, but I can’t seem to get this right as the bottom overlay text links aren’t right and the transition length as the slider moves is off due to these smaller images. Any ideas? Thanks.

Hi,

Please post a link to your site, so we can check.

Best Regards,
Csaba

Hello, I’ve similar problem with slider in homepage.
My website is www.hellogreen.it
Uploading a new article sometimes the dimension of the image is different from the previous ones.
How can I check the slider settings? It looks like sometimes is not cropping properly the images.

Thanks

V.

Hi,

Can you please point out what is the issue with the images? Maybe if you can point out the issue on a screenshot will be much better.

Best Regards,
Csaba

Hi Csaba, for me the problem is this one
(see image)

Hi,

Please try to upload images with the same aspect ratio ( or better the same size, so you will have same size images there ).

Best Regards,
Csaba

Hello Csaba,
as you can see from the images here it looks like there still some problem from the slider.
The first and second images still look bigger, even with same aspect ratio or size.

Bigger slider only in 1st and 2nd images.

How to fix it? Thanks

Hi,

That’s because you don’t have the same image size, one is 220px high the others are 197px, that’s why there is a difference, you can limit the max-height with this Custom CSS if you like ( this is not the best solution, because it can stretch your images a bit, so the best solution is to upload same image size ):

.owl-carousel .owl-item img {
    max-height: 197px !important;
}

Add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Hello Csaba,
the only image I’m uploading is the main image for each article (and all of them are 640 px x 340 px).
Then I’m selecting the proper category to show the latest articles into the slider in the homepage.
I’m not reducing the images (220 px or 197 px).
How can I fix it? (Especially as you said, the proper solution isn’t limiting the maximum height).

Thank you!

Hi,

I have checked and you also have 410x260px images too, so if you add the same size images for all your articles you will surely don’t have this issue, the size doesn’t matter, just make sure all of them have the exact same size ( if you want them to be the same high ).

Best Regards,
Csaba

Hello Csaba,
Sorry but the 3 images I have issues with are

And all of them have the same dimension (640x340), which image are you refering to?

Thanks a lot!

Valeria

The new image for this article (http://www.hellogreen.it/alimentazione-vegana-e-sport-sono-compatibili/) shows the same problem in the homepage.
How to fix it?

Thanks

V.

For now I used the custom CSS
.owl-carousel .owl-item img {
max-height: 197px !important;
}
Let me know, thank you

Valeria

Hi,

Yes, those are 640x360, but your other images are 410x260px, like this one for example: http://www.hellogreen.it/wp/wp-content/uploads/2016/01/detersivo-ecologici-naturali-410x260.jpg so these work well with the Custom CSS I gave you ( the height is based on these, the higher ones will be stretched to that size ), but the best solution will be to add same sized images, so you have to add only 640x360px image or 410x260px, decide which one, but don’t use both size, because then the problem appears, the Custom CSS makes all of them the same height, but it stretches the higher images, so if you end up using 640x360px, then remove the Custom CSS, or if you like the size you have with the Custom CSS, then use 410x260px.

Best Regards,
Csaba