Re: Slideshows

Solved

How can I improve the quality of slideshow images on desktop view?

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
16116 2409 3125

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 | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

Replies 8 (8)

oscprofessional
Shopify Partner
16116 2409 3125
.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 | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Mavidals
Excursionist
12 1 1

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

oscprofessional
Shopify Partner
16116 2409 3125

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 | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
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
16116 2409 3125

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 | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Mavidals
Excursionist
12 1 1

Yes

oscprofessional
Shopify Partner
16116 2409 3125

@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 | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
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.