How do I adjust the banner height on default pages only?

Magenta8 · ‎09-25-2021

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

drakedev · ‎09-25-2021

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.

If my answer was helpful click Like to say thanks

If the problem is solved remember to click Accept Solution

Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.

View solution in original post

drakedev · ‎09-25-2021

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.

If my answer was helpful click Like to say thanks

If the problem is solved remember to click Accept Solution

Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.

dmwwebartisan · ‎09-25-2021

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

Magenta8 · ‎09-25-2021

@dmwwebartisan

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

Magenta8 · ‎09-25-2021

Excellent. Thanks

Magenta8 · ‎09-26-2021

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

How do I adjust the banner height on default pages only?

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links