How can I reduce the collection page banner height in Impact theme?

Solved

How can I reduce the collection page banner height in Impact theme?

Hobbycards
Excursionist
17 0 2

Hello,

Im trying to reduce the height of our collection page banner only. Im using the impact theme. 

This is what we are looking for:

Hobbycards_0-1706173477145.png


This is what we got:

Hobbycards_1-1706173487228.png

Thank you.

BR

 

Accepted Solution (1)
Danishshopdev
Shopify Partner
163 17 20

This is an accepted solution.

hey @Hobbycards ,

 

please paste this code in your, theme.liquid file at ending of </body>.

{% if template contains 'collection' %}
<style>
  .content-over-media>:is(img,video,iframe,svg,video-media) {
    height: 290px !important;
}
</style>
{% endif %}

 

and let me know if its works.

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

banned

View solution in original post

Replies 10 (10)

Danishshopdev
Shopify Partner
163 17 20

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

 

banned
Hobbycards
Excursionist
17 0 2

Hello,

Thank you. The URL is Hobbykort.se password: Hobbykort11

Danishshopdev
Shopify Partner
163 17 20

which banner do you want to change, share link of that

banned
Hobbycards
Excursionist
17 0 2

So basically, all collection pages will have this kind of banner." https://hobbykort.se/collections/fynd

Danishshopdev
Shopify Partner
163 17 20

Hello There,

try to paste this code , by navigating to theme customization and then settings to custom code,


if the height is less or greater just change the 290 value to greater or less

 

.content-over-media>:is(img,video,iframe,svg,video-media) {
    height: 290px !important;
}

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Screenshot_34.png

banned
Hobbycards
Excursionist
17 0 2

Hello,

Thank you that works. But it also changes my landing page banner height, I only want this to apply to the collection pages. Is there a solution for that?

 

BR

 

Danishshopdev
Shopify Partner
163 17 20

yes just give me a mint

banned
Danishshopdev
Shopify Partner
163 17 20

This is an accepted solution.

hey @Hobbycards ,

 

please paste this code in your, theme.liquid file at ending of </body>.

{% if template contains 'collection' %}
<style>
  .content-over-media>:is(img,video,iframe,svg,video-media) {
    height: 290px !important;
}
</style>
{% endif %}

 

and let me know if its works.

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

banned
Hobbycards
Excursionist
17 0 2

It works great, thank you.

Danishshopdev
Shopify Partner
163 17 20

welcome.

banned