Issue: Product thumbnail images under the main image in Dawn 12.0.0 appeared left-aligned; goal was to center them on desktop.
What was tried: Multiple CSS tweaks were suggested (e.g., targeting .product–medium .thumbnail-list with grid-template-columns and widths, or a specific #Slider-Thumbnails… selector). These partially shifted thumbnails but caused side effects (smaller thumbnails, misalignment on other products), suggesting conflicting rules.
Key detail: An existing rule forcing a fixed number of grid columns (e.g., repeat(6, 1fr)) impacted layout consistency across products.
Resolution: Changing the product page’s desktop media gallery layout from “Thumbnails” to “Thumbnails carousel” in the theme settings enabled centering to work. With that setting, this general rule produced the desired result without breaking other products: .thumbnail-list { grid-template-columns: repeat(5, 1fr) !important; margin: 0 auto; justify-content: center; }.
Outcome: Thumbnails now center correctly beneath the selected image. Status: Resolved.
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.
