I made a custom mobile-first grid for
collection-repeat and it looks like this http://codepen.io/junerockwell/pen/EazBVJ?editors=101 It works as intended. If you resize the CodePen view or the browser size, the number of columns change. Like for smaller screens, only 1 column. On a little bit bigger screen, there are 2 columns, 3 columns for much wider screens, and so on. But it only seems to work for browsers. And that’s the problem I’m having and that’s the reason why I need help.
I did the exact same thing on a real Ionic project (not CodePen). I used the same CSS, the same image binary. When I installed it on an iPhone5S and an regular-sized iPad, it doesn’t look the same. Succeeeding items appear to be on top of (or overlapping) previous items.
To have a visual idea, here’s the are photos of devices:
Some device screenshots for better viewing:
So can anyone tell me what’s going on, or does anyone have a solution to this bug, or is there an alternative?
The more important thing that I really want to accomplish is to have different number of columns based on screen size.