How can I resize slideshow images to avoid cut-offs?

Store Design
, , , ,
1

Hello, is there a code to make all my images in my slideshow the exact same size to avoid getting cut off?
No matter how I seem to resize them even when they are all the same size. One of them seems to keep getting cut off. I have tried many codes on here and none seem to work for this issue. I am using Refresh Theme. And at this point, switching to another theme just because of this issue isn’t an option. :disappointed_face: disclaimer I have no coding experience pretty much so truly any detailed help would be awesome! Thank you in advance!

cr8.JPG
cr8.JPG1873×813 134 KB

2

Hey @PlzHalp777 ,

Whats your store url?

3

  1. Identify the CSS selector for the slideshow: Determine the CSS selector that targets the slideshow container or the individual slide elements. It could be a class or an ID assigned to these elements. For example, it could be .slideshow or #slideshow.

    1. Apply CSS properties for image size: Add CSS properties to control the size of the images within the slideshow. Here’s an example of the CSS code you can add to your theme’s stylesheet or within the <style> tags in the appropriate Liquid section:
.slideshow img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
1 Like
4

Hello Sir,

is there a Code I can use that affects only the desktop view?

I copied your Code and it worked really well. The only Problem is, the code affects both views (Mobile and Desktop) and I dont really want to change the Mobile view.

Is there a chance I can only change the height of the desktop slideshow view?