Slideshow images getting cut off on mobile version

Shopify Discussion

Topic summary

A Shopify store owner using the Flawless theme is experiencing slideshow images being cut off or improperly displayed across different mobile and desktop devices. The theme lacks built-in settings to address this issue, requiring custom code modifications.

Solutions Provided:

  • CSS object-fit adjustment: Add object-fit: contain or object-fit: fill styling to slideshow images via theme.css or custom CSS in theme.liquid
  • Theme setting change: Modify slideshow height setting to “Adapt to first image” in the theme customizer
  • Custom styling code: Insert specific CSS snippets before the </body> or </head> tags in theme.liquid

Current Status:

The original poster tested solutions and confirmed images now fit containers, but reports they appear squeezed on some devices. They’re seeking a way to make the container adapt to the image size rather than forcing images to fit the container dimensions. The discussion remains ongoing as the user looks for a more optimal solution.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

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/

2 Likes
2

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 tag

RESULT:

Moeed_0-1735812398351.png
Moeed_0-1735812398351.png1898×910 287 KB

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

Best Regards,
Moeed

3

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!

4

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

5
  • 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 and press ‘Save’ to save it
  • This is the result you will get:

BSSTekLabs_0-1735836533337.png
BSSTekLabs_0-1735836533337.png1896×903 303 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
6

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…

7

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… ..