I’m having a real problem getting a 2 column bullet list to work properly in mobile landscape and portrait views. They work fine in desktop & tablet view but when I get to mobile landscape I have a problem.
When I expand and contract the size of the browser in mobile views the right column stays in place but the left column moves left as the window expands and right as the window contracts. I have tried so many ways to fix this but nothing is working. I have started over from scratch and still get the same issue and again the desktop and tablet view are fine.
If anyone can please help me understand the problem I would be greatful.
The first shot is at 480px (I realize its not centered, just want it to work proper at this point). The second shot is at 767, notice that the left column stays left as the screen size increasing and the right side stays in position. I want both sides to stay in position.
Well, it is normal behavior of columns. They are responsive and change its size proportional to screen width. Text inside the columns has left aligning and will “stick” to the left side of column.
For keep text centered, but still aligned to the left, I would suggest wrap every list with a div. Left column div make float: right, right column div - float: left.
