How to change the dimensions of the slideshow

Store Design
, , , , , , , , , , , , ,

Topic summary

A user is customizing a slideshow to display iPhone footage and needs to adjust its dimensions. They’ve already applied CSS code to set a max-height of 600px and center the image.

Current Issue:

  • The image needs to be centered
  • A gray rectangle background needs to be removed
  • Goal is to display only the centered image without any background

Technical Details:

  • Custom CSS targets .slideshow__media img, .slideshow__slide, and .slideshow classes
  • Code includes flexbox centering and overflow handling
  • A screenshot shows the current appearance with the unwanted gray background

Status: A support representative indicated the issue appears resolved, though no solution details were provided in the thread.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hi, I want to add iPhone footage to my slideshow, so I need to change the dimensions. I’ve already made some adjustments using this code:

.slideshow__media img {
  max-height: 600px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}
.slideshow__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: auto;
  min-height: auto;
}
.slideshow {
  max-height: 600px;
  overflow: hidden;
}

And this is how it looks:

CreatorTim_0-1745867332666.png
CreatorTim_0-1745867332666.png1920×896 74.6 KB

Now, I want to align the image to the center and remove the entire gray rectangle background. So basically, I just want the image to be centered without the background or wtf is that.

Here’s my store: https://creationwithtim.com/products/cinematiq-lut-collection-copy

Thanks a lot,
Tim

2

Hi @CreatorTim ,

It seems the issue has been resolved. If you have any other questions, I’m happy to help.