Solved

Change collection banner height

Hobbycards
New Member
5 0 0

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!

 

Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp| Website

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.

 

Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp| Website
Hobbycards
New Member
5 0 0

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

Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp| Website
Hobbycards
New Member
5 0 0

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

Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp| Website
Hobbycards
New Member
5 0 0

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

Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp| Website
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!

 

Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp| Website
Hobbycards
New Member
5 0 0

It works great, thank you.

Danishshopdev
Shopify Partner
163 17 20

welcome.

Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp| Website