The slideshow picture is not displayed cropped in the desktop version

Shopify Discussion

Topic summary

A user reported that slideshow images appear cropped on desktop but display correctly on mobile. A support representative provided a CSS solution to fix the issue:

Solution steps:

  • Navigate to Online Store → Theme → Edit code
  • Locate the base.css file
  • Add custom CSS code at the bottom targeting slideshow components with media queries for screens 750px and wider

CSS adjustments include:

  • Setting minimum height to 100vh
  • Applying object-position: center bottom
  • Targeting slideshow banner components specifically

The user confirmed the solution successfully resolved the cropping issue. The discussion is now closed with the problem fixed.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

Hello. Help. The slideshow picture is not displayed cropped in the desktop version. In the mobile version, everything is ok. www.nutrigeek.shop

2

Hi [email removed]Viktor1904,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media screen and (min-width: 750px){
slideshow-component .banner--small:not(.banner--adapt) {
    min-height: 100vh !important;
}
slideshow-component .media>img{
object-position: center bottom !important;
}
}

PageFlyVictor_0-1680769182831.png
PageFlyVictor_0-1680769182831.png3308×1772 371 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

3

Thanks! Fixed

4

You are welcome. I’m glad when I can help you :heart_eyes: