Solved

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

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)
oscprofessional
Shopify Partner
15830 2369 3072

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

Replies 8 (8)

oscprofessional
Shopify Partner
15830 2369 3072

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

oscprofessional_0-1652269734339.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | 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
15830 2369 3072

@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

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
dfmkt20
Excursionist
21 0 5

@oscprofessional Still doesn't work. unfortunately 😞

oscprofessional
Shopify Partner
15830 2369 3072

@dfmkt20 ,

Pls share the exact URL

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
dfmkt20
Excursionist
21 0 5
oscprofessional
Shopify Partner
15830 2369 3072

@dfmkt20 ,

Hi Dear,

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
oscprofessional
Shopify Partner
15830 2369 3072

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing