Tinker theme Product carousel on mobile is not uniform

Store Design
, ,
1

Hello,

The product pages on my store are acting up. For desktop the images conform to a lovely uniform square. On mobile somehow this breaks.

Mobile: the next image bleeds over, and is also different height to the current one.

IMG_6215
IMG_62151206×1077 264 KB

Any help on this would be much appreciated!

2

In your Shopify theme editor, go to Edit code and find your product template CSS, then add this to your carousel/slideshow container:

.product__media-item {

height: 400px;
overflow: hidden;
}

.product__media-item img {
width: 100%;
height: 100%;
object-fit: cover;
}

If that selector doesn’t work, use Inspect Element on mobile view to find the exact class name Shopify is using for your image container and replace it.

3

In the settings of this section, in “Custom CSS” you have these:

.product-media-container.media-fit {
  max-height: 90vh;  /* Restrict height to the viewport height */
  width: auto;    /* Maintain aspect ratio */
  height: auto;   /* Maintain aspect ratio */
  display: block; /* Remove any inline spacing */
  margin: 0 auto; /* Center the image */
}
img {
  max-height: 90vh;  /* Restrict height to the viewport height */
  width: auto;    /* Maintain aspect ratio */
  height: auto;   /* Maintain aspect ratio */
  display: block; /* Remove any inline spacing */
  margin: 0 auto; /* Center the image */
}

I’d remove them completely as these are rules which make your product images irregular.

You can, however, modify them to only apply on desktop:

@media (min-width:750px) {
  .product-media-container.media-fit {
    max-height: 90vh;  /* Restrict height to the viewport height */
    width: auto;    /* Maintain aspect ratio */
    height: auto;   /* Maintain aspect ratio */
    display: block; /* Remove any inline spacing */
    margin: 0 auto; /* Center the image */
  }
  img {
    max-height: 90vh;  /* Restrict height to the viewport height */
    width: auto;    /* Maintain aspect ratio */
    height: auto;   /* Maintain aspect ratio */
    display: block; /* Remove any inline spacing */
    margin: 0 auto; /* Center the image */
  }
}

Also – some of your product images have transparent background and this is why slideshow dots are not visible.
Try this code t fix that:

slideshow-controls:has(.slideshow-controls__dots) {
  filter: contrast(0.5);
}
4

@tim_tairli Thank you, that fixed the mobile image issue.

Where do I add the slideshow controls code?

Thanks again for your help.

5

In the same “Custom CSS” setting – this would be my first choice.