FROM CACHE - en_header

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

Solved
dfmkt20
Excursionist
21 0 5

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)

 

 

Accepted Solution (1)

Accepted Solutions
oscprofessional
Shopify Partner
12527 1933 2480

This is an accepted solution.

@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

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing

View solution in original post

Replies 8 (8)
oscprofessional
Shopify Partner
12527 1933 2480

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

oscprofessional_0-1652269734339.png

 

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
dfmkt20
Excursionist
21 0 5

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


It looks okay on Desktop, but bad on Mobile

oscprofessional
Shopify Partner
12527 1933 2480

@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

 

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
oscprofessional
Shopify Partner
12527 1933 2480

@dfmkt20 ,

Hi Dear,

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

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
dfmkt20
Excursionist
21 0 5
oscprofessional
Shopify Partner
12527 1933 2480

@dfmkt20 ,

Pls share the exact URL

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
oscprofessional
Shopify Partner
12527 1933 2480

This is an accepted solution.

@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

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing