Banner on Collection Page auto adjust

Hello I amusing Venture Theme and I have a code that can put a Banner/Image on the Collection Image, and it's pretty good. However, every time I zoom out the image size is not adjusted, Below is the code I used

i put this above of {% paginate collection.products by 20 %} on collection.liquid of theme 

{% if collection.handle == 'life-by-kojiesan' %}
<img src="https://cdn.shopify.com/s/files/1/0522/1046/6966/files/LIFE_BY_KOJIESAN.jpg?v=1613549427"/>
{% endif %}

can you please help me to make it auto resize every time i zoom out, below is the picture of what it looks like if I zoom out 

Kim_Tech_0-1613551483338.png

I zoom out 33%, it will be better than if I zoom out this it adjusts automatically like the image on the homepage, there will be no blank space on another side. 

Thank you

0 Likes
Pallavi
Shopify Expert
769 100 115

Hello There,

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Pallavi
Shopify Expert
769 100 115

Hello There,

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

main#MainContent {
margin-top: auto;
}

working is good
Screenshot :- https://prnt.sc/zu6jzu

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes

main#MainContent { margin-top: auto; }

 

i just copy this only no need to change anything?

0 Likes

Kim_Tech_0-1613560102790.png

the code is not working i just copy what you gave at the bottom of theme.scss.liquid but still if I zoom out my collection page the image still not responsive to adjust or is their a way that if I zoom the image will just go to center instead of left side

again this is the code I use for image of collection page above

{% if collection.handle == 'kojiesan' %}
<img src="https://cdn.shopify.com/s/files/1/0522/1046/6966/files/KOJIE-SAN_622d692e-ff31-4cb2-91b1-244ee6fee12...>
{% endif %}

i pasted it above of paginate

 

0 Likes