Items stacked on top of each other

[studiolam]

Hello, I'm using the React-stack-grid library for my website.

Everything works fine, but only on mobile screen every item is stack of top of each other. I analyzed the items and it is specifically when the window is less then 444px. If it is less, they are stack on top of each other. When it is more then 445px, they work just fine.

Does somebody know how to fix this issue? I already tried a lot, like the viewport meta tag, checking if somewhere in my code i used 444 of 445 px, ...

Thanks!

[damechen]

Same issue here!

[laraferroni]

Had the same thing. If you set a minWidth on the parent container object to at least the column width, it no longer stacks.

[nimran]

same issue here. any solution available?

[jigarvishwakarma]

Facing the same issue

[somaria]

@laraferroni , you have a solution? could you show us how to set the parent container?

[laraferroni]

Sure, it would be something like, where classes home has a width set. In my case, I just set width=100%, but you could also use a minWidth that is greater than 350.

<Container className={classes.home}>

   <StackGrid
           columnWidth={350}
           appear={scaleDown.appear}
           appeared={scaleDown.appeared}
           enter={scaleDown.enter}
           entered={scaleDown.entered}
           leaved={scaleDown.leaved}
         >
</Container>

[loveakinlesi]

Had the same issue on both laptop and mobile. If you set monitorImagesLoaded={true}, it fixes it. It's actually stated in the documentation here.