Streaming live at 10am (PST)

Columns not aligning properly on mobile view


#1

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?


#2

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

Learn how to do it here: http://help.webflow.com/sharing-your-public-webflow-site-link


#3

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

https://preview.webflow.com/preview/searchtest2911455230020741?preview=86974d9dc85e734738997bde14585f87


#4

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.


#5

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?

EDIT:
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


#6

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


#7