Streaming live at 10am (PST)

Columns not aligning properly on mobile view

I have a set of columns which is behaving strangely by not stacking properly on mobile view.
This screen shot is what it looks like:

and this is what it looks like if I zoom out to 90% in chrome (the way it should!):

what’s causing this strange behaviour?

Can you please share your project’s public link so it’s easier to understand your issue?

Learn how to do it here:

Here it is, if you view it on mobile portrait the columns mess up.

I don’t know why but if you remove the padding on the “cat text”… div and add it to the text inside, you dont get the issue.

Thanks for that. I tried it out and it appeared to work but as soon as I had changed the padding on the third tile it started to break again.

I tried defining a percentage width for the text container rather than use padding and I got exactly the same behaviour. Doing the first 2 tiles fixes it but if you fix the rest it breaks again. The fact that zooming out within chrome makes a difference is even more baffling.

Any other suggestions?

I have fixed it by reducing the size of the padding, it works but it’s not ideal so a proper fix is still welcome

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.