SLider Images are cutting off on mobile version

Hello there,

I know it is very problematic, but technically it is normal. The slide image is actually a background image that covers the entire slide area. The image size is always fixed, but the slide container isn’t — it adapts with the screen height. So we applied cover background size as it’s the most appropriate way among other options. Quoted from MDN article:

Cover background scales the image as large as possible and maintains image aspect ratio (image doesn’t get squished). The image “covers” the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

It looks like you want the particular part of the image to be the main spot, where the visitor should see. I’d suggest you to prepare a new images, so that when on smaller screen that most important sport will be visible nicely.

Or, other alternative, you can prepare smaller images specifically to alter the default ones on smaller screen. Once they are ready, upload them into media library (WP dashboard > Media). To call them, you need to add the below custom CSS code into your site’s additional CSS option (Appearance > Customize > Additional CSS).

@media only screen and (max-width:767px){
  
  .slide-item:nth-of-type(1){
    background-image: url("https://www.infinitytransportation.net/wp-content/uploads/2017/01/image1-mobile.jpg") !important;
  }

  .slide-item:nth-of-type(2){
    background-image: url("https://www.infinitytransportation.net/wp-content/uploads/2017/01/image2-mobile.jpg") !important;
  }

  .slide-item:nth-of-type(3){
    background-image: url("https://www.infinitytransportation.net/wp-content/uploads/2017/01/image3-mobile.jpg") !important;
  }

  .slide-item:nth-of-type(4){
    background-image: url("https://www.infinitytransportation.net/wp-content/uploads/2017/01/image4-mobile.jpg") !important;
  }
  
}

Adjust the image URLs.

Regards,
Kharis