Shopify themes, liquid, logos, and UX
How can i change the height of the banner image on 'default' pages only (not on homepage).
Solved! Go to the solution
This is an accepted solution.
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 <body> declaration in file theme.liquid like as this:
<body class="gradient {% if template == 'index' %}home{% endif %}">
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.
This is an accepted solution.
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 <body> declaration in file theme.liquid like as this:
<body class="gradient {% if template == 'index' %}home{% endif %}">
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
So, this code worked by adjusting the banner height, but it also messes with the footer, bringing it up and under other page elements.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024