How do I find out the exact measurements needed for my Collection Banner Image?

Store Design
1

Is there a way for me to find out the exact measurements of the collection Banner Image?

Somewhere in the code perhaps?

I’ve tried all the recommended sizes, but it still gets cut off in the worst areas.

website URL: www.comvita.com.ph (Debut Theme)

2

@dfmkt20
hii,
its collection banner size 1663px by 676px so please create collection banner this size

oscprofessional_0-1652269734339.png
oscprofessional_0-1652269734339.png1669×765 220 KB

3

Thanks for the reply @oscprofessional , however it still gets cut off on mobile, is there a way to resolve this issue?

dfmkt20_0-1652336026075.png
dfmkt20_0-1652336026075.png439×676 130 KB

It looks okay on Desktop, but bad on Mobile

4

@dfmkt20 ,

@media only screen and (max-width: 749px)
.slideshow__text-wrap.slideshow__text-wrap--mobile {
    top: 0.9rem;
}
}

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

5

@dfmkt20 ,

Hi Dear,

You have shared the screenshot, as I did not find the screenshot.

6

@oscprofessional Still doesn’t work. unfortunately :disappointed_face:

7

@dfmkt20 ,

Pls share the exact URL

8

https://comvita.com.ph/collections/kids-health

9

@dfmkt20 ,

.collection-hero__image.ratio-container.js.lazyloaded {
background-size: 100%;
}

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

1 Like