How can i change the height of the banner image on ‘default’ pages only (not on homepage).
Hi @Magenta8 welcome to the community.
Unfortunately it is not possible to do that by just using theme settings, you need to write custom code for that.
First of all you need to add a CSS class to the body in order to be able distinguish the main page from the other pages.
You can do that by modify the declaration in file theme.liquid like as this:
in this way the home page will contains the specific CSS .home class
Then you can use a specific custom CSS to reduce the banner image height. You can add it at the end of file base.css
In this example I changed the image banner image to 320px.
body:not(.home) main .shopify-section:nth-of-type(1),
body:not(.home) main .shopify-section:nth-of-type(1) .banner__media,
body:not(.home) main .shopify-section:nth-of-type(1) .banner__content {
max-height: 320px;
}
and here’s the result, using the standard settings of Images Banner.
You could require some other custom adjustments.
That’s the basic approach, I think that it would better to add this as new parameters to section settings, but it will require more effort and explanation.
Please add the following code at the bottom of your assets/section-image-banner.css file.
@media screen and (min-width: 750px){
.banner {
min-height: 50rem !important;
flex-direction: row;
}
}
Thanks!
this adjusts the banner height globally, I had already attempted this.
i only want the height to change on default content pages
Excellent. Thanks
