Hello,
I’d like to change the max height of my slideshow, specifically on the desktop. It takes up too much space. How do I go about that? I’m using Shopify’s Refresh theme.
My website: https://himuani.com/
Thanks,
Jay
Topic summary
A user seeks to reduce the slideshow height on desktop in Shopify’s Refresh theme, finding it takes up excessive space.
Initial Solutions:
- The slideshow height can be adjusted in the theme customization settings
- Current options include “Adapt to first image,” “Small,” “Medium,” and “Large”
- However, even the “Small” option may still be too tall for some users
CSS Customization Approach:
For more precise control beyond the built-in options, custom CSS can be added to the base.css file:
@media screen and (min-width: 750px) {
.slideshow--placeholder.banner--adapt_image {
height: 25rem !important;
overflow-y: hidden;
}
}
Important Note:
- The initial CSS code didn’t work for one user because their theme lacked the “slideshow–placeholder” class
- A revised version removing that class selector was provided
- Users should verify the correct class names in their specific theme implementation
The discussion remains open regarding whether the revised CSS solution successfully resolved the height issue.
Hi @jcad009
You can change the slide height in Customize theme, it seems that you’re setting the slide height as “Adapt to first image”.
Please try it and let us know if it works for you by giving us a like or marking it as a solution.
Hi - how can we adjust the slider image slider height beyond these schema controls.
Like couldn’t I apply some top level css code in the base.css file that could adjust the height and width?
personally I’d like to lessen the height. even the “small” option is still isn’t small enough.
I’d like to keep It full width, but reduce the height closer to like 500 px or less
Hi @J-Diamond ,
You can add the below code in the base.css file and change the height as you want:
@media screen and (min-width: 750px) {
.slideshow--placeholder.banner--adapt_image {
height: 25rem !important;
overflow-y: hidden;
}
}
I hope you find it helpful!
Hi, thanks for the response - and while it seems a logical fit… it had no effect. 
I tried al the views. Shrug
any more tries?
Hi @J-Diamond
Please modify the above code as follows to match your theme. Because in your theme, there is no “slideshow–placeholder” class, it doesn’t run the CSS before.
@media screen and (min-width: 750px) {
.banner--adapt_image {
height: 25rem !important;
overflow-y: hidden;
}
}
I hope that it will work for you.
Hi @jcad009
You can alter the slide height in the Customize theme section. It appears that you have “Adapt to first image” or “small” selected as the slide height.
