Solved

Can I improve slideshow image quality on desktop in Shopify?

Mavidals
Excursionist
12 1 1

Hey my slideshow images are perfect on mobile but lose quality on desktop because they are cropped to fit, is there a way to fix this that they show like on mobile? or is there at least a way to make the quality look better

Mavidals.com

Accepted Solution (1)
oscprofessional
Shopify Partner
15831 2369 3072

This is an accepted solution.

@media only screen and(min-width:769px){
.bgset {
    background-size: 100% 100%;
    height: 200vh;
}
}

Please Try this code, If this not work, then let me know !

have a nice day !

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
15831 2369 3072
.bgset {
    background-size: 100% 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
Mavidals
Excursionist
12 1 1

Is there a way to do it without the image looking stretched?

oscprofessional
Shopify Partner
15831 2369 3072

This is an accepted solution.

@media only screen and(min-width:769px){
.bgset {
    background-size: 100% 100%;
    height: 200vh;
}
}

Please Try this code, If this not work, then let me know !

have a nice day !

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
Mavidals
Excursionist
12 1 1

Thank you

https://vimeo.com/581611734 Aside from it looking stretched, this was perfect

https://vimeo.com/581611801 Second code didn't work, it also changed the collection images

oscprofessional
Shopify Partner
15831 2369 3072

oscprofessional_0-1627804954604.png

do you want like this?

 

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
Mavidals
Excursionist
12 1 1

Yes

oscprofessional
Shopify Partner
15831 2369 3072

@Mavidals ,

your issue is solved or not ?

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
HumaColombia
Visitor
2 0 0

Hola, una pregunta. 

Lo que pasa es que en mi pagina de inicio tengo una presentacion de diapositivas, coloco una imagen como Banner pero al mirar la version mobile, la imagen no se ajusta a su tamaño y me gustaria saber si hay alguna manera de poder configurar para poder ajustar esa imagen a la version mobile. 

te agradezco si me ayudas.