Streaming live at 10am (PST)

4 Column Section Not Justifying Correctly on Mobile


#1

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


#2

Hi @chrisgreer33, could you point on which page you have this issue? Because it is really hard to find it.

Regards,
Anna


#3

Sorry. Yes. It's the Retail page.


#4

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)


#5

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?


#6

What about this option?


#7

That would work. How would I pull it off without totally starting over?


#8

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


#9

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.


#10

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