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%
Thank you, in advance.
Topic summary
Goal: Make all product thumbnail images display in a single row under the main image in Shopify’s Dawn theme (v12.0.0). Images and screenshots illustrate the wrapping issue and the fix.
Solution provided: Increase the thumbnail grid to 6 columns by adding this CSS at the end of base.css: .thumbnail-list { grid-template-columns: repeat(6, 1fr) !important; }. This prevented the last thumbnail from wrapping to a new row.
Outcome: The change resolved the issue for the provided product page. The original poster confirmed success.
How the fix was identified: The responder used Chrome DevTools to inspect the element and see the existing 5-column grid configuration. They suggested learning DevTools basics (e.g., via YouTube) to diagnose similar layout issues.
Status: Initial issue resolved. A related, new request (centering thumbnail images under the selected image) was raised via a separate linked thread; that follow-up remains open.
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
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,
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!