Hi,
On my webshop https://waterfilterprofessional.nl/ I want to decease the hight of the banner of my homepage. Now it’s really big.
How can I do that?
Topic summary
Main issue: Reduce the homepage slideshow/banner height in a Shopify store.
Initial approach: A CSS snippet was suggested for base.css using a media query (@media min-width: 990px) to set max-height: 400px on .slider-mobile-gutter .slideshow.banner.banner–adapt_image. This partially worked but introduced an unwanted scroll behavior in the banner.
Theme setting solution: Instead of custom CSS, the recommended fix was to use the slideshow section’s built-in “Slide height” setting in the Shopify theme (Refresh). Selecting a smaller slider size (e.g., small or medium) resolved the issue cleanly.
Clarifications:
- base.css: the theme’s stylesheet where custom CSS can be added.
- Media query: CSS rule that applies at specific screen widths (here, desktop ≥ 990px).
- Slideshow/banner: the homepage hero section showing rotating images.
Attachments: Screenshots were provided to show where the “Slide height” option is located in the Refresh theme’s Customize panel.
Outcome: The user confirmed the theme setting worked. Status: Resolved. No further action items; optional support offered if needed.
Add this code to Edit theme >> base.css File
@media(min-width:990px){
.slider-mobile-gutter .slideshow.banner.banner--adapt_image{
max-height: 400px !important;
}
}
Let me know if it works or not.
Thanks, it partly worked. Only the banner scrolls along. How can I fix that?
@Jake-S Hello
Go to customize > select slide height from “slideshow” them pick slider size small/medium/ .
Hi @kazi_1 , thanks for the reply. But I don’t have that option in the settings of the slideshow
Thanks @kazi_1 ! It worked
@Jake-S great if you need any help you can contact me thanks!