How to create full size banner for different collection pages Desktop

How to create full size banner for different collection pages Desktop

Mrstep
Explorer
71 3 11

How to create full size banner for different collection pages Desktop. now it is cutting of the heads of people

www.shopcuzzo.com

Reply 1 (1)

kevinkarma55
Shopify Partner
101 11 11

Hi, 

Main issue it because you have verticle image on horizontal layout banner, for better result and for long term I encourage you to fix image to make it horizontal but following is a fix I can think of:

Find a file called `component-collection-hero.css` and change the update following CSS:

.collection-hero__image-container img {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

to following by adding that new object-position property:

.collection-hero__image-container img {
    object-position: 50% 22%;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

 

change the second value (22%) to how much you want to position the image on the Y axis.

Please remember to Like & Mark Solution to the post if it helped you.
Thanks !
If you'd like to support me, you can Buy Me a Coffee
Need help with anything related to Frontend?
Checkout kevinkarma.me