Are you able to share the site URL here or are you developing it locally? If you can share the site URL it may make it easier to debug. Otherwise, if you have other custom CSS applied, it is possible that it would be conflicting with the display as well.
Hi @ben72,
Would you be seeing this when only viewing your site in Safari, or is it in all browsers? If Safari only this is a known bug that has a fix waiting to be deployed.
https://github.com/woocommerce/storefront/pull/1217
@jarretc It could be other css messing with it. I will check in more detail as soon as I can. Here is a link if you care to check, http://bit.ly/2OSgPwv
@ryanr14 It’s the same in all browsers and it’s the gallery thumbs. See link above.
Thanks!
There are a few different CSS rules coming into play here causing the images to not align. From testing in Chrome on OSX the following should work
@media (min-width: 768px) {
.storefront-full-width-content.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
margin-right: 8%;
}
.storefront-full-width-content.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n) {
margin-right: 8%;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n+1) {
clear: none;
}
}
Wow! Thanks a lot @jarretc !! That looks much better!
Do you have any idea why when I view the gallery thumb images they are 300x300px. Shouldn’t they be 100x100px? And they display as 90px it seems.
Thanks again!
Not quite sure what you mean. When I click on one of the smaller images in the gallery below the product, the image loads up in the bigger version above the gallery.
If I click on that image (magnifying glass at top right) it loads the image in an overlay but those are 473×473 for me.
Hi @ben72,
I think you’re referencing this here where the actual image size loaded is 300 x 300, but the theme maxes it out at 100 x 100.
Link to image: https://cld.wthms.co/3LQ3qy
It looks like some CSS sets the width to 100px, it’s minified though so we can’t tell exactly what file it comes from.
Link to image: https://cld.wthms.co/ecIjGB
It seems then that the theme by default is generating a 300px wide image, you can use a function to override this and set your own size. If you do set a new size, you’ll need to head to **WooCommerce > Status > Tools** and regenerate the thumbnails before you see the new sizes.
https://docs.woocommerce.com/document/image-sizes-theme-developers/#section-1
We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.
