Solved

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

jbslide
Explorer
50 7 7

Hello,

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

 

jbslide_0-1702775627200.png

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.

Accepted Solution (1)

ZenoPageBuilder
Shopify Partner
1052 203 219

This is an 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

Screenshot 2023-12-17 at 09.27.06.png

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com

View solution in original post

Replies 4 (4)

ZenoPageBuilder
Shopify Partner
1052 203 219

This is an 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

Screenshot 2023-12-17 at 09.27.06.png

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
jbslide
Explorer
50 7 7

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
Shopify Partner
1052 203 219

Hi @jbslide 👋

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

Screenshot 2023-12-18 at 09.08.55.png

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
jbslide
Explorer
50 7 7

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...