How to resize slideshow in so it fits both mobile & PC? (Minimal Theme)

JaneRoo
New Member
2 0 1

I use three slides in the Slideshow Section, all of them are 1500px x 600px.

It looks good on PC, but not good at all on mobile view, the slides will be cropped.

How can I do to make both side perfect? Thank you.

KetanKumar
Shopify Partner
20503 2120 7732

Hello, @JaneRoo 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
JaneRoo
New Member
2 0 1
0 Likes
KetanKumar
Shopify Partner
20503 2120 7732

@JaneRoo 

Thanks for url.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

media screen and (max-width: 768px) {
#flexslider--slider .slides__image, #flexslider--slider .slides svg {
    height: auto !important;
object-fit: contain;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
RUGMAN
New Member
2 0 1

Hi there

Can you also do this for my site?

 

Link: https://www.werug.dk

 

Thanks a lot in advance and merry Christmas to you!

KetanKumar
Shopify Partner
20503 2120 7732

@RUGMAN 

Thanks for it 

also, merry Christmas to you!

can you please share further issue images

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
RUGMAN
New Member
2 0 1

As you can see, the image is cropped on the mobile version. Do you know if this can be fixed in my Wokiee theme?

IMG_4678.PNGSkærmbillede 2020-12-09 kl. 17.37.51.png

0 Likes
KetanKumar
Shopify Partner
20503 2120 7732

@RUGMAN 

can you please try this

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file.

.tp-bgimg.defaultimg {
    background-size: contain !important;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
NaturaCase
New Member
2 0 1

Dear Ketan,

Could you please help us with this?

https://naturacase.shop/

Regards,

Dan

KetanKumar
Shopify Partner
20503 2120 7732

@NaturaCase 

Thanks for the pos.t how can I help you? what's an issue?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes