How to fix CSS for enlarged product thumbnail images?

[Duxburys]

Help, Ive broke my CSS on my product image thumbs…

I has succsessfully enlarged them and then all of a sudden they don’t fit. Please help.

You can see the issue here - https://www.duxburyshomeandgarden.co.uk/products/lounge-set-aerocover-l-shape

The code is here -

/**

• ---

• PRODUCT GALLERY

• ---

*/
.product-gallery {
position: relative;
margin-bottom: 12px;

}

.product-gallery__carousel-wrapper {
position: relative;
margin-bottom: 25px;

}

.product-gallery__carousel .flickity-viewport {
transition: height 0.2s ease-in-out;
}

.product-gallery__carousel:not(.flickity-enabled) .product-gallery__carousel-item:not(.is-selected) {
display: none;
}

.product-gallery__carousel-item {
width: 100px;
padding: 0 20px;
}

.product-gallery__carousel-item–hidden {
visibility: hidden;
}

.product-gallery__carousel-item[aria-hidden=true] .plyr__control {
/* This is a quick fix to prevent the controls to gain focus until if the slide is not visible */
visibility: hidden;
}

.product-gallery__carousel-item.is-filtered {
display: none;
}

.product-gallery__size-limiter {
margin: 0 auto;
}

.product-gallery__view-in-space {
background: rgba(var(–text-color-rgb), 0.08); /* This color is defined by Shopify spec */
border-top-left-radius: 0;
border-top-right-radius: 0;
}

.product-gallery__view-in-space[data-shopify-xr-hidden] {
visibility: hidden;
}

@media screen and (min-width: 1000px) {
.product-gallery__view-in-space[data-shopify-xr-hidden] {
display: none;
}
}

.product-gallery__view-in-space svg {
margin: -1px 8px 0 0;
width: 16px;
height: 16px;
vertical-align: middle;
}

.product-gallery__zoom-notice {
display: none;
}

@media screen and (max-width: 640px) {
.product-gallery__carousel {
margin-left: calc(-1 * var(–mobile-container-gutter));
margin-right: calc(-1 * var(–mobile-container-gutter));
}
}

@media screen and (min-width: 1000px) {
.product-gallery__carousel {
margin: -4px;
}

.product-gallery__carousel-item {
padding: 4px;
}

.product-gallery–with-thumbnails {
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
width: 100%;
}

.product-gallery–with-thumbnails .product-gallery__carousel-wrapper {
flex: 1 0 auto;
margin: 10px 5px 0 42px;
}
}

@media screen and (min-width: 1000px) and (-moz-touch-enabled: 0),screen and (min-width: 1000px) and (hover: hover) {
/* Implementation note: starting from version 1.8, the theme now supports media type in Shopify (including 3D models
and video. As a consequence, the “zoom” now only makes sense for “images”, for which the slideshow becomes draggable.
We therefore scope this so that the notice is only shown for images */
.product-gallery__carousel–zoomable ~ .product-gallery__zoom-notice {
display: block;
margin: 26px 0 6px 0;
width: 100%;
text-align: center;
font-size: calc(var(–base-text-font-size) - (var(–default-text-font-size) - 14px));
}

.product-gallery__carousel–zoomable ~ .product-gallery__zoom-notice svg {
width: 10px;
height: 10px;
margin-right: 14px;
vertical-align: baseline;
}
}

@media screen and (min-width: 1000px) {
.product-gallery {
margin-bottom: 0;
}
}

[JoesIdeas]

Too late now I know but always duplicate your theme before making changes, then you can easily publish the previous theme if you broke something.

Here’s a guide for working with customizations and identifying elements and customizing them in the browser with CSS (so you know what rules to add to your stylesheet): https://speedboostr.com/how-to-safely-edit-your-shopify-theme.

That will help you identify what to fix and what CSS looks good.

For example, if you’re wanting to make those thumbnails smaller on 1000px+ screens, you can do something like this:

@media screen and (min-width: 1000px) {
  .product-gallery__thumbnail-list {
    width: 124px;

    .product-gallery__thumbnail {
      width: 120px;
    }
  }
}

That will make it look like this: