change position of carrousel pictures on product page

Shopify Discussion
1

Hi on my product page underneath my product picture i have a small carrousel from the 2,3,4 picture but i want this carrousel next to my product picture (on the left) in small. The following code did exactly that for me:

@media screen and (min-width: 750px) {
media-gallery.product__column-sticky {
display: flex;
flex-direction: row-reverse;
}
.product–thumbnail_slider .thumbnail-slider {
align-items: flex-start !important;
width: 20%;
}
slider-component {
width: 80%;
}
.thumbnail-slider .thumbnail-list.slider–tablet-up {
flex-direction: column;
}
.thumbnail-list.slider–tablet-up .thumbnail-list__item.slider__slide {
width: 100% !important;
}
}

But the thing is this affected all my columns and collections on homepage and other pages. Can somebody help to get this code to specificaly only work on my product page? Website ebloui-jewellery.com

2

That is wrong, css class selectors cannot wrap media queries. This is how you use a media query, and you do not need to use “and” or “screen” in your media query.

@media (min-width: 750px) {
  .template-product {
    /* ... */
  }
}
3

i put the following code but it didn’t do anything.:

@media (min-width: 750px) {
.template-product {
media-gallery.product__column-sticky {
display: flex;
flex-direction: row-reverse;
}
.product–thumbnail_slider .thumbnail-slider {
align-items: flex-start !important;
width: 20%;
}
slider-component {
width: 80%;
}
.thumbnail-slider .thumbnail-list.slider–tablet-up {
flex-direction: column;
}
.thumbnail-list.slider–tablet-up .thumbnail-list__item.slider__slide {
width: 100% !important;
}
}

Do you maybe know how to specify the template product correctly?