I have some tabs set up. In the tabs content I set up a some columns and a bullet list. I have everything positioned the way I want on desktop and tablet views but when I get to mobile landscape I have a problem.
The information should stay centered as it does in desktop and tablet views but for some reason when I adjust the view size the left column repositions itself. I tried a ton of different ways to fix but nothing works. If anyone can explain what the problem is or what I am doing wrong I would appreciate it.
Here are a few screen shots to better explain. Notice the first image how close the columns are. When I grab the sizing tab on the right and expand the view they space out and the left columns moves way left.
It would be hard for me to help without seeing the full structure of the page. Would you be able to post a preview link?
Without seeing anything my suggestion would be to give the list parent a max-width and set the margins to: top = 0, right = auto, bottom = 0, left = auto. Hope this helps
Hi @soulluciani, From what it looks like, are you referring to the bottom screenshot where the list items are being pushed to the left?
I apologize if I’m way off - if so, can you please add a few fullscreen screenshots that explain the issue in as much detail as possible. It appears to be a simple fix/clean up of styles but I’m not able to say for sure without more info.
@thewonglv The first shot is the mobile landscape screen at 480px notice the space between columns and the position they are in. I realize they are not centered at this point. The second shot is 767px, notice that the right column stayed in the same position but the left column went further left.
I tried a lot of things, I cleared everything and started from scratch a few times but could not figure out what the issue is. Again, this only happens on the mobile screens, desktop and tablet views work fine.