image carousel sizing and carousel navigation broken in mobile view

Hi.

1. The arrows and dots work great on my android phone. Maybe try clearing your phone’s cache?

2. Ideally, they should all be the same size. If you can’t do that, then here are a couple of methods that might work. (no guarantees, just fingers crossed, LOL)

1. Add the following code to wp-admin > Appearance > Additional CSS

#my-carousel .slick-slide-image {
max-height: 250px;
}

Then, go to edit page with Elementor > Edit Image Carousel > Advanced > set CSS ID = my-carousel

or

2. By default, WP image sizes are not hard-cropped. So the solution is adding a custom image size with the hard crop function on. Example:
add_image_size( ‘300×300 Custom size’, 300, 300, true ); – added this code in your functions.php file.
Then install a Regenerate thumbnails plugin and regenerated all the images thumbnails on your site. Then remove the plugin as it won’t be needed anymore because all the newly uploaded images will have the correct sizes.

The difference between already existing 300×300 size and the custom one is that in the Custom size we enable Hard Crop option by using “true” parameter. In the default WP 300×300 size there is no Hard Crop feature enabled, that’s why it changes only the biggest image side’s size to 300px and keeps the other one proportionally different.

Hi, thank you for your reply.

1) Yes, after clearing cache they are showing up normally.

2) I found another simpler solution for the sizing for the vertical photos. Added this to my CSS:

.elementor-widget-image-carousel .slick-slide-image {
max-height: 250px;
}

Thnaks