Want product thumbnail images center under selected image - Dawn Theme, ver. 12.0.0

[jbslide]

I want the product thumbnail images centered below the selected image. The product below shows the images "left-justified" instead of centered.

I used this code before (added to bottom of base.css) that I saw in another post and it seemed to work then stopped working:

@media screen and (min-width: 750px){
.thumbnail-slider .thumbnail-list.slider--tablet-up {
margin: 0 auto;
justify-content: center;
}
}

Website is adroitfulness.com

pw: LetMeIn45%

Product link: https://adroitfulness.com/products/xtl-forged-chopper-household-round-head-fish-cutting-knife-kitche...

Thank you in advance.

[PageFly-Henry]

Hi @jbslide 

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

.product--medium .thumbnail-list {

    grid-template-columns: repeat(3,1fr);

    width: 70% !important;

    margin-left: 75px !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[jbslide]

PageFly-Henry,

Thank you, but it's not working correctly. The thumbnails shifted right, but not centered, and the thumbnails size reduced. I tried changing the numbers around but that really didn't help much. Thank you

It also knocked the thumbnails for another product off center and to right:

Thank you

[jbslide]

Still looking for help on this issue.

Thank you

[KetanKumar]

@jbslide 

oh sorry for this 

can you please confirm this look!

[jbslide]

KetanKumar,

Yes, that's what I want. Centered just like that.

Thank you

[KetanKumar]

@jbslide 

Thanks for confirm 

can you please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

.product--medium .thumbnail-list 
   {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 300px;
  }

 After Code view

[jbslide]

KetanKumar,

It didn't work. The thumbnails stay to the left:

I changed the numbers in the code to this:

.product--medium .thumbnail-list
{
grid-template-columns: repeat(6, 1fr) !important;
max-width: 990px;
}

because the icons were small and one of my other products thumbnails  were in (2) rows of three:

It was in (2) rows of 3 so I change the 3 to 6 in the code. The 990 just tried to test, and thumbnail images went back to normal size

Also I have a similar code at the bottom already: This was given to me from another post to resolved the issue of the product above not showing 6 thumbnails in one row. It showed (5) in one row and one in a 2nd row - from this post for your reference:

.thumbnail-list {
grid-template-columns: repeat(6, 1fr) !important;
}

https://community.shopify.com/c/technical-q-a/how-to-fit-all-thumbnail-images-under-the-selected-ima...

I hope this makes sense.

Thank you

[websensepro]

Hi, @jbslide.

Apply this code.

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

ul#Slider-Thumbnails-template--14630634553408__main {margin: 0px 70px auto !important;width: 55rem !important;}

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

[jbslide]

@websensepro 

Thank you for taking a look.

I actually tried that code a couple days ago after taking a look at the one you resolved in the other post I mentioned.

I get the same result as mentioned above with the other developer that helped. The thumbnails shift right, but then my other product thumbnails are shifted too far right. The vest product thumbnails are shifting too far right. See below:

Seems there's other code(s) conflicting. Here is the link to the vest:

https://adroitfulness.com/products/autumn-women-vest-winter-puffer-parkas-coat-2023-new-casual-pocke...

I will just leave as is if it's not something easy to resolve/take too much of your time.

Thank you.

[jbslide · Accepted solution]

This code actually resolved the issue:

.thumbnail-list {
grid-template-columns: repeat(5, 1fr) !important;
margin: 0px auto;
justify-content: center;
}

I finally realized the problem was the desktop layout on the default product page was set "thumbnails" instead "thumbnails carousel".

When I switched to "thumbnails carousel" the code worked and the thumbnails center.