Dawn. Change Banner height.

Solved
Magenta8
New Member
4 0 0

How can i change the height of the banner image on 'default' pages only (not on homepage).

0 Likes
drakedev
Shopify Partner
598 128 163

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.

FireShot Capture 106 - Crazy Web Studio 2 - 127.0.0.1.png

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. 

• If my answer helped click Like to say thanks
• If the problem is solved remember to click ✅ Accept Solution
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
dmwwebartisan
Shopify Partner
8983 2088 2849

@drakedev 

 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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Magenta8
New Member
4 0 0

@dmwwebartisan 

this adjusts the banner height globally, I had already attempted this.
i only want the height to change on default content pages

0 Likes
Magenta8
New Member
4 0 0

Excellent. Thanks

0 Likes
Magenta8
New Member
4 0 0

So, this code worked by adjusting the banner height, but it also messes with the footer, bringing it up and under other page elements.

footer.png

0 Likes