How to change collection image height on the collection page? - Debut theme

[BuisnessOwner0]

I want to change the collection image height on each of my collections page. The image is getting cut off and i cant manually adjust what appears on the page?

[sarhov · Accepted solution]

You mean collection image itself or products height per collection ?

[BuisnessOwner0]

The collection image itself at the top. I want to increase its height as its cutting out the majority of the image.

[sarhov · Accepted solution]

Yes, you can have overwrite the default styles.

Click on Actions button and go into Edit Code.

Here search/open theme.scss.liquid file.

Scroll at the very bottom and add the following codes.

.collection-hero__image{
  height: 400px;
}

// Below goes styles for mobile
@media screen and (max-width: 749px) {
  .collection-hero__image{
    height: 200px;
  }
}

Play with 400px and 200px (for mobile) to get the result you want.

[BuisnessOwner0]

Thanks Sarhov. It is now working! Appreciate your help!

[Soaks]

Do I just copy and paste what you have there? I cant find where it goes, either! Argh! Sorry, just struggling with my collections page top image being cut very short! Width is fine!

[metaresine]

I copy and paste it , not working

can you advise

[HayleyVOC]

Hi, 

Were you able to resolve this? I have been trying to use the above code also without any luck. 

Thanks!

[Soaks]

No. I could not change it. I ended up just removing the banner all together
and just having a title.
Sorry I can't help!
Debut is a great web format, but their banners are very much in need of an
upgrade!
Kind regards.

[Soaks]

It looks like this in my store. Much more professional than a quarter height banner!

https://atptextures.com/collections/texture-sets