Slideshow images getting cut off on mobile version

[anumailme46]

My slides show images are getting cut off on various devices... when i used "inspect" and searched how my website looks on various devices, for few devices it looks fine but for few mobiles and desktop devices the images are cut off.. basically i use flawless theme, and there are no settings to resolve this issue.. if i need to combat this issue i have to edit code maybe... so i need help about this problem... please someone help me..

My website: https://hamsaradiance.com/

[Moeed · Accepted solution]

Hey @anumailme46 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.slideshow .slideshow__slideImg.image-full-width img {
    object-fit: fill !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[anumailme46]

Thanks @Moeed it did work.. now the images are taking the shape of the container... it looks good but still the images are getting squeezed on some devices even though they are fit... can you help me adapt image size to the whole container.. i mean i want the image size to be taken by the container, not my image to be fit into it.. if this can work it can be better i feel... 

[websensepro]

Hi @anumailme46 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.slideshow .swiper-slide img {
    object-fit: fill !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[anumailme46]

Thanks @websensepro  it did work.. now the images are taking the shape of the container... it looks good but still the images are getting squeezed on some devices even though they are fit... can you help me adapt image size to the whole container.. i mean i want the image size to be taken by the container, not my image to be fit into it.. if this can work it can be better i feel... ..

[Bundler-Manuel]

Hey there @anumailme46  Go under Home Page Theme, find Slideshow, the menu opens on the right, for Slide height change it to Adapt to first image.

Try this and let me know if it works for you

[BSS-TekLabs]

- Here is the solution for you @anumailme46 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
.slideshow__slideImg.image-full-width img {
    object-fit: fill !important;
}
</style>

- This is the result you will get:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.