I’m probably overlooking something obvious, but I can’t figure out why on phone landscape version my third column of a four-row column sometimes gets pushed over leaving an empty column under the first. See below. Any help would be appreciated.
https://preview.webflow.com/preview/previewmag?preview=55a4ec46209a850fe1050dda666062cd
Hi @chrisgreer33, could you point on which page you have this issue? Because it is really hard to find it.
Regards,
Anna
Sorry. Yes. It’s the Retail page.
Well, reason is that columns has height:auto.
All columns has a pre-sets float: left and when it is going to “stack” one on another column#3 can’t move all the way to the left side because of column#1 size.
So you can ether give columns fixed height, or use option when every column will take 100% of width (which I think is better, because make content more readable on small screens in landscape position)
Thank you and makes sense. The only problem with the 100% width is it makes the picture distorted trying to fill that space. Any suggestions?
That would work. How would I pull it off without totally starting over?
Since those elements has different classes, all you need is just give them float:left and float:right properties. Plus make headers aligned to center.
Here is screencast how I did that:
https://nimbus.everhelper.me/client/notes/share/video/297671/FmG7dmqGrxno3PviWKTBeTT4BG2yBNyR/none/zcf1443639569679/video.webw
Thanks @sabanna. That will work. The only downside is that I then have to modify for photo standard, but the horizontal phone looks so much better.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
