I am trying to create a CMS item grid with Flexbox.
Dsk - item = 33.3%
Tab - item = 33.3%
Mob - itme = 100%
In Safari, it all responds nicely when going from dsk to mob. But on the way back from mob growing to dsk breakpoint the layout breaks, whereby the items do not fill the set (growing) space correctly, flush image to image . It works in Chrome, that leads me to think it’s a Safari issue.
I see your issue, and annoyingly Safari and Chrome have slightly different ways of showing a website, and sometimes might need a tweak here and there, to make sure it works on all browsers.
It will be a magical day ‘if’ all browsers had the same base technology and a website would look perfect on any browser, but a man can only dream for the day!
I would suggest using Grid for this, as Safari and Chrome show this basically the same…
I have attached a video showing how to set that up, which will be good for mobile too. If you tweak the min size of the container to be 50% and 100% for tablet and mobile respectively.
thanks for the swift reply. I do really like your approach to building the grid here. I have not used the auto-fit or the min / max features in grid to date. This incidentally has fixed another issue I was having using flex-box in the way I was on tablet IOS, where it was also breaking, which is great!
Unfortunately, I am still seeing this strange behaviour on desktop safari, where the items split away from each other as you grow the browser size?
Super appreciate your efforts and time here.
Yeah the auto-fit feature is such a life saver, we use grid for everything and anything that can benefit from this superior technology.
Could you resend the updated read-only link and a link to your published site? I’ll take a look for you, it’s probably todo with a max width object, sure it’s a simple fix and you are all set!
yes I also assumed it maybe something to do with max-width. Tried changing the collection item max-width to none to default 100%. Your eagle eye maybe able to spot the issue!
Yeah it’s a learning curve with grid, but once you work out all the ways it works, it’s incredible!
I see you have a few containers that are static, if you could change them all to relative like in the picture below. Also there is a flex objects button which lets the grid elements stretch, this could help the problem too.
I see in Safari, it looks fine, but when you make the screen smaller then expand, they don’t stretch up again. So that’s a bit strange… If these tips don’t help, I’ll look at it further for you.
Alternatively, try having a fixed min width for desktop like the screenshot below shows. Maybe this will fix the issue.
