Making equally responsive List items

Dear Webflow Community,

I am trying to make a responsive filtering menu for my portfolio website. the filtering part works great thanks to [Sabanna’s MixItUp tutorial] (https://webflow.com/website/mixitup-webflow-tutorial)
and i think it looks pretty good on different sized screens except for mobile… I am having trouble aligning the list items, they seem to be moving as different speeds.

I am sure this messiness is my own doing as I am a novice at webflow but I thought building my dream website was a good way to learn.

Any help anyone can offer would be super wonderful.

Thanks for sharing your time in advance.
I’ve attached a link and screen shots to show what I am trying to work on…

Here is my site Read-Only link

Hello.
Its hard to see whats, what. So many settings.
But why a list? You can use div blocks.

Hi @design_guy. It looks like you’re trying to individually style your list items which is causing errors. Try removing the margins on each ‘Filter List Item’ and changing the ‘Filter List’ to Display: Grid. Make sure the grid has two columns & two rows. Then you should be able to style the grid to fit your needs. Let me know if you need more clarification.

2 Likes

I took a look at this and kind of had to throw out all styling on the buttons for this to work. Go into the mobile view and just strip everything, like change the buttons from being absolute positioned and moved around to static and set fixed width and heights (not maxes) for the buttons. You’re inheriting a bunch of positioning from the larger screens that are wreaking havoc on your centering, so remove or set all margins to 0 for example :slight_smile:

1 Like

Hi Kenny, welcome to the forum :slight_smile:

a. The 6 filter buttons should all have the same classname. It will make your life easier.
b. Try to keep elements inside their parents borders. Brake this rule only if there’s an actual need.
c. The structure isn’t ideal for columns in mobile, so I would not use this element. Use normal divs with a parent with display:flex

1 Like

Thank you VERY VERY MUCH!! I appreciate your help on this. I figured it was a styling issue but as you could see I had made a mess of things. Thanks again

1 Like

Thank you for the warm welcome @Avivtech, I also appreciate the general web design guidelines. I’ll keep these in mind going forward. @Willy_Wheeler thanks for the tips as well, very nice idea for fixing the problem and simplifying my styling disaster

1 Like