How to adjust an image in the slideshow

[CreatorTim]

Hi, I added a vertical image to my slideshow and I need to center it, remove the background, and get rid of the frame.

Here’s my store: https://creationwithtim.com/products/cinematiq-lut-collection-copy
(Just scroll all the way down to find the slideshow section)

Thanks a lot,
Tim

[Asad-Mahmood]

use this css

@media (min-width:768px;) {
.slideshow__media img {
    max-height: 600px;
    width: auto;
    height: auto;
    display: block;
    margin: 0px 414px !important;
}
.slideshow__media.banner__media.media {
    background: #fff;
}
}

[CreatorTim]

Hi appreciate your reply! I added the code, but it’s still not centered, it’s leaning more to the left.

I did tweak it a bit, and now I just need to shrink the whole thing and center it properly.

Here’s what it looks like right now: (It's big as hell)

So ideally, I want the max height to be around 600px, and the width to adjust automatically based on that

[topnewyork]

Hi @CreatorTim 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
#shopify-section-template--24956466200841__slideshow_TA93c4 .slideshow__media img {
    margin-left: 38rem !important;
}
.banner--adapt, .banner--adapt_image.banner--mobile-bottom {
    background: white !important;
}
</style>

 If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[CreatorTim]

Hey, I added the code, but it’s still not centered, it’s leaning more to the left.

I did tweak it a bit, and now I just need to shrink the whole thing and center it properly.

Here’s what it looks like right now: (It's big as hell)

So ideally, I want the max height to be around 600px, and the width to adjust automatically based on that.