I’m using the Release theme. I’d like to make the height of the Collection banners smaller. It looks fine on mobile, but not on desktop. Please help!
Store is: laughinggullhill.com, PW: kaitlin
Topic summary
A user working with Shopify’s Release theme wants to reduce the collection banner height on desktop while keeping mobile display unchanged. The banner appears too tall on desktop views.
Proposed Solutions:
- Two CSS code snippets were provided targeting different selectors
- Both use media queries to adjust banner height only on screens wider than 750px
- One approach modifies
--section-heighttoauto, the other sets it to20svh
Implementation Issue:
- Initial attempt to add CSS through the Customizer’s Custom CSS section failed at the save/publish stage
- Users recommended adding the code directly to the
base.cssfile instead (Shopify Admin → Online Store → Theme → Edit code) - Code should be placed at the bottom of the file
Status: The discussion remains open as the user works through the implementation method, with guidance provided on alternative placement locations for the CSS fix.
1 Like
You can solve it by adding this code to Custom CSS in Sales channels > Online store > Themes > Customize > Theme settings.
@media (min-width: 750px) {
html #shopify-section-template--17328702652494__banner > div {
--section-height: auto;
}
}
@cielle-studio - please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css
@media screen and (min-width: 750px){
.section-page-banner__group{--section-height: 20svh !important;}
}
Please put it at the bottom of your base.css file instead