How can I change the thumbnail size on the very right side of product pages?
https://theothelabel.com/collections/memorial-sale/products/theia-orchid-printed-sequin-tank-top
Topic summary
A user seeks to modify the thumbnail size for product page images, specifically the small stacked images displayed on the right side of the page.
Initial Solution Attempted:
- A CSS code snippet was suggested to add to
section-main-product.css:.thumbnail img { object-fit: contain !important; }
Current Issue:
- The proposed code does not change the thumbnail dimensions as needed.
- When the user manually adjusts the size, the thumbnails become partially covered by the main product image due to overlap.
- The user needs a solution that both resizes the thumbnails and repositions them to prevent this overlap.
Status: The issue remains unresolved, with the user awaiting further guidance on proper CSS adjustments for both sizing and positioning.
Hi there Joey! @JoeyRoo
I suggest that you add this code at the bottom of section-main-product.css file
.thumbnail img {
object-fit: contain !important;
}
Don’t forget to let me know if you found this helpful!
This dose not change the size of the thumbnail images. I want to change the size of the small stacked images on the right hand side. I am able to change their sizing, but when I do that, they end up being slightly covered by the main image so I need to be able to change their size then also move them over so there is no overlap