Why isn't my slideshow banner image cropping correctly in Studio 2.0 theme?

Store Design
, ,
1

I’m using Studio 2.0 theme and my slideshow image is set to adapt to first image. This means my image on desktop is really big and takes up 2 page scrolls to get passed as you can see in the files attached. I’d like to change it from ‘adapt to first image’ to small or medium instead however when I do this, instead of the image cropping on desktop it squashes the image so it doesn’t look right. On my older saved themes when I try to do this same thing it crops correctly so I know it should crop. I’ve done some basic coding to my store from youtube tutorials etc so that could be the issue. My website is www.doorstepdrip.com

Any help would be much appreciated

2

Hi @doorstepdrip ,

Please follow the steps below:

  • Step 1: You can choose ‘Slide height’ as small or medium as you like.

  • Step 2: Go to Assets > base.css and paste this at the bottom of the file:

.slideshow__media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

Hope it helps!

3

Amazing that worked perfectly, thank you so much! Just out of curiosity what are the cubic-Bezier figures and what happens if they are changed? Will this change the sizing of the slideshow images?

4

Hi @doorstepdrip ,

You can refer: https://www.w3schools.com/cssref/func_cubic-bezier.php

It won’t affect the size of the image, it’s just a default transition effect of the theme