Slideshow images are not scaling to other monitors.

Store Design
, , , , ,

Topic summary

Slideshow images in a Shopify Dawn theme appear correctly on a wide monitor but get cropped on the left/right on smaller screens (e.g., laptops). Reducing the image to 1200×240px did not prevent cropping and made it blurry.

Actions taken:

  • Implemented a CSS-based solution suggested in the thread to make the slideshow images scale responsively across viewports. The poster asked where to place the code (sections > custom-liquid.liquid, around {% endschema %}) and about the correct class selector, then confirmed it worked.
  • After scaling worked, a white line appeared under the image due to the slideshow’s white background showing when the image height auto-scaled; the poster changed the slideshow background color, resolving this.

Current status:

  • Open question: whether the slideshow container/component can automatically adjust its height to match the image height to avoid visual mismatch. No confirmed solution posted yet.

Notes:

  • A preview link was shared for testing.
  • The exact CSS snippet and class names referenced are central to the fix but were not included in the visible posts.
Summarized with AI on December 12. AI used: gpt-5.
1

Hello everyone!

I have a website with the Dawn theme. I have a slider on the top which I already adjusted to fit mobile and desktop images. It works perfectly.

But the problem I have now is that I am working on a wide screen. When adding images to de slideshow, I see them perfectly on my monitor. When someone with (for example) a laptop goes on the website, they see that the slider image has been cut on both ends (left and right) to fit the screen.

I have tried to adjust the image size tot max 1200x240 pixels, however, this didnt work. It still cut the image. But the image was blurry now.

Can someone help me with this? I think I have to decrease the image in size by a percentage to be viewed properly on smaller monitors. But how?

Thank you in advance!

1 Like
2

Yes, the theme I have used is the Dawn theme

1 Like
3

Sure!

this is not the live version. I am working on the website as we speak.

https://av60lrn45ejrys8d-82558976266.shopifypreview.com

4

Thanks,

so i copy this code in sections → custom-liquid.liquid?

above or below {% endschema %} ??

and where can i find the actual class?

5

Thank you for your help, I will test it out tomorrow!

6

Hi there!

I have tested it and it worked! Thank you.

But the image is scaling to the monitor correctly now, but now I am getting a white line under the image. The background color of the slideshow is white, and it shows when the height of the image is scaled automatically. :disappointed_face:

Is that something I can fix? Can I change the background color for the slideshow?

Nevermind! I found it.

Thank you!

1 Like
7

One more thing if i may,

Is there a possibility to adjust the height for the slideshow container/component to the image?
I have adjusted the background colour so it matches the website, but it looks weird. If I can adjust the height for the slider to automatically adjust to the slider image, that would look much better.

Thank you in advance.