How to fix slides show size for both desktop and mobile device?

[jessica_0430]

hi,

I added slides show for my website. But the image size can not fit for desktop and mobile at the same time.

The image will be cut off in mobile screen.

Can anyone help?

Thanks

From desktop:

From Mobile:

[jessica_0430]

My website:

https://lelundijewelry.com/

[Made4uo-Ribe]

Hi @jessica_0430

Check this one.

• From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
• Find the theme that you want to edit and click on “Actions” and then “Edit code”.
• In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (max-width: 749px){
.media>img {
    object-fit: unset !important;
}
}

• And Save.
• Result:
• 

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[jessica_0430]

hi,

Website is fine, the issue is on mobile device.

I added in the theme code as per your suggestion, but slides still cut off from mobile device.

My theme is dawn.

Thanks

[Made4uo-Ribe]

oh not in the theme.liqud on the base.css/section-image-banner.css either on that two files in the asset folder.

[jessica_0430]

the image is distorted a bit. How can I modify the width and height?