Main issue: The Dawn theme’s Home page Slideshow is too tall on desktop when using “Adapt to first image,” and switching to the “Large” height setting crops important parts of the image.
Requested outcome: Maintain a shorter, consistent slide height (similar to “Large”) without cropping the slide content.
Suggestion provided: A CSS tweak targeting desktop—set a minimum height on .banner–large:not(.banner–adapt) in base.css (min-height: 82rem)—to adjust banner height.
Latest update: After applying the CSS, the slide content was still cropped and the overall image height remained large. The original poster asked specifically for a way to decrease the height while keeping the “Adapt to first image” setting.
Key terms: Dawn theme (Shopify’s default theme), Slideshow section (image carousel on Home), “Adapt to first image” (sets slide height based on the first image’s dimensions), base.css (theme stylesheet).
Status: Unresolved. Screenshots are central to showing the cropping issue. The thread seeks an alternative code solution to reduce height without cropping under “Adapt to first image.”
Hi there,
I have a Slideshow section on the Home page of my store but the height of all my slides is too large on Desktop if I use the setting “Adapt to first image.”
I would like the slides to be the height of the “Large” setting in the Edit theme page:
But when I do this, it crops my image and I lose content as shown below:
Can someone help me with a code that I can use to get this height for my slides without the images getting cropped?
My store URL is https://cubbabubba.ca/
TIA!
Hi Tia,
To increase your banner height on desktops you can use the following CSS:
@media (min-width:768px) {
.banner--large:not(.banner--adapt) {
min-height: 82rem !important;
}
}
Adding the code at the end of your base.css file should reflect the modification.
Kind regards,
Gabriel
Hi Gabriel,
Thank you for your response! I tried your code at the end of my base.css file but it results in my content getting cropped:
And the height of the image is still pretty huge. Do you know if there’s a code that will allow me to decrease the height if I’m using the “Adapt to first image” setting?
Thanks so much!
