0

http://dev-lbs.vaimo.com/building-materials/bricks (This is a development environment website)

The product grid works fine on Chrome and Firefox but not Safari. It breaks in two ways:

  1. .products-grid: display: flex; - Flex seems to add a tiny bit of space to the left of the first item, causing the first row to drop the last item down to the next row

  2. The item heights don't match one another. This seems to break down on the .item > div styles - this div should take up the full height of the .item box, with the .product-info part of the item growing taller to take up any excess space.

I'm messed around with this for a while but can't get anywhere. I was hoping it might just be a case of adding something like 'min-width' somewhere, just some weird quirk to how Safari deals with things. Has someone encountered these kinds of Flex issues with Safari before, who may know the cause of the issues here?

Thanks

bluebu
  • 43
  • 4
  • check your code, there are some issues in the html https://validator.w3.org/nu/?doc=http%3A%2F%2Fdev-lbs.vaimo.com%2Fbuilding-materials%2Fbricks and 42 errors in your css https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fdev-lbs.vaimo.com%2Fbuilding-materials%2Fbricks&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en – mlegg Sep 23 '16 at 15:49
  • possible duplicate: [Flexbox code working on all browsers except Safari. Why?](http://stackoverflow.com/questions/35137085/flexbox-code-working-on-all-browsers-except-safari-why) – Michael Benjamin Sep 24 '16 at 01:45

0 Answers0