How can I resize slideshow images for desktop viewing?

[saraterese]

I have added a slideshow at the bottom of my store. They look perfect from a mobile but are absolutely huge on a desktop. I have tried resizing the images to fit the recommended size but having the same issue. If I select small on the slides the images are cut off. Any help making the slides look good on a desktop would be greatly appreciated.

Here is my store: ellamarinababy.com

[BSS-Commerce · Accepted solution]

Hi @saraterese ,

You can try this way:

1. Online Store -> Themes -> Edit code:

2. Find the base.css file  and add this code at the end of the file:

@media screen and (min-width: 750px){
  .slideshow.banner{
     max-height: 800px;
  }
  .slideshow__media img{
    object-fit: contain;
  }
  .slideshow:before{
    padding-bottom: 41% !important;
  }
}

Result:

 Hope it's useful to you @saraterese !

[saraterese]

Awesome! Thanks it worked.

[STextiles]

Is there a way to change the grey background (around the cropped desktop banner) to white rather than the default grey? As I added this code to my Dawn themed store too and it worked great, I would just rather the surround be white to blend in with the rest of the page... Thanks!

[saraterese]

I would love this too! If anyone has a solution.

[Pashlich]

Hi! Not sure if you are still wanting a solution for this, but I just added one above that worked for me. 😊

[Pashlich]

Hi! I had the same problem with the grey background when I applied the BSS-Commerce solution to my base.css file - I manage to solve it by adding an additional setting into the code which has worked for me! (Trade theme)

Additional Code: 
.slideshow__media {
background: transparent;
}

Hope that helps anyone else. 😊

[Pashlich]

Hi BSS - I also would like to change the grey background (around the cropped desktop banner) to white rather than the default grey? Any tips on how to do so? Thank you!!