Why isn't my product image responsive on mobile?

[Ihtisham]

This is second time I am asking for help. I am facing issues particularly with product pages where the website is not responsive on mobile. The image and variants have huge space in between them, the whole product page does not fit on one mobile screen, it needs to be scrolled up and down to see the details. Need the product image, variants and price to feature on one screen on mobile. How I could fix the issue need help. Site URL https://dealsoutlet.com/products/dell-optiplex-9020-desktop-pc-intel-core-i5-3-2-ghz-8-gb-ram-new-1-…

Thanks

@KetanKumar , [email removed]LitExtension

[Abhay_babu]

please make sure , all product or varinet images you added all its having equal size.
Example: if 1920px then each images having Equal size.

[Halothemes]

Hi @Ihtisham ,

You can try follow the instruction below:

1. Go to Online Store → Theme → Edit code.
2. Asset → create separate css file for css code then paste code below in the file.
   Ex: /custom.css

@media(max-width: 767px){
  .slick-slider img {
    max-height: inherit !important;
  }
  .product-img-box .slider-for [data-zoom] {
    max-height: 300px !important;
    object-fit: contain !important;
  }
}

3. Layout → /theme.liquid → paste code below into the tag of the file:

{{ 'custom.css' | asset_url | stylesheet_tag }}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[Ihtisham]

Thank you so much @Halothemes . It worked

[Sajeel]

try to use slick slider or any good slider with an auto height feature. if you will hard code it will crop or stretch your images like on desktop your images are cropped due to fixed height