How to fit all thumbnail images under the selected image in one row? - Dawn Theme , ver. 12.0.0

[jbslide]

Hello,

I want thumbnails images to appear in one row. In the product below, the last thumbnail starts a new row.

The website is adroitfulness.com

pw: LetMeIn45%

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

Thank you, in advance.

[ZenoPageBuilder · Accepted solution]

Hello @jbslide 👋

Currently, I see the image list layout has 5 columns, you can change it to 6 columns by adding this code at the bottom of file base.css

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

The result

[jbslide]

Thank you! That resolved it. I've been trying to figure this out for myself.

Can you tell how/where you located 5 columns?

hank you!

[ZenoPageBuilder]

Hi @jbslide 👋

I figured it out by using the Chrome DevTools. You can learn basics of it on Youtube.

[jbslide]

ZenoPageBuilder,

I do go to "Inspect", but still not easy sometimes for a beginner-but will practice.

Can you help me with this post also? Thank you very much!

https://community.shopify.com/c/technical-q-a/want-product-thumbnail-images-center-under-selected-im...