Issue with list responsiveness

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.

Hi @soulluciani

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

@tim Thanks for responding. I did try that but it didnt work. Here is the read link. https://preview.webflow.com/preview/soul-lucianis-radical-site?preview=47f3cf66ef1b25b2e9f07610008499ee

The problem only occurs in the mobile window.

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.

Thanks in advance! :slight_smile:

@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.

Here is the read link: https://preview.webflow.com/preview/soul-lucianis-radical-site?preview=47f3cf66ef1b25b2e9f07610008499ee

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