Adding "All" to a filtering mechanism in Blog

Hi all,
My company’s blog is taking shape but I think I run into a bug.
I’d like users to be able to filter the posts by topic. It works. Once user filter by a topic I’d like to make it easy to see all posts again, therefore I added another All button within the navbar outside the collection list. It worked for a while, but that something happened. The list got a negative indent to the left, and the All button dropped a line. Those red spaces are shown when I hover the margin button, although it is set to 0. How do I fix this?

Hi @LupoAsaf

It looks like the width of your links is too long to fit in the space provided. You may need to decrease the width of your links depending on your current settings.

However, it is difficult to point you in the right direction without a Read-Only link. :slight_smile:

Double check that the border + cell width together doesn’t exceed 100% the
two border effects visible in your screenshot suggest this could be the
issue.

Thanks for the advice. I forgot to add the link. Here it is.
I shortened the terms, @Brando. That’s not the problem.
Deleting the border didn’t solve it either, @Tim_Cawood.

https://preview.webflow.com/preview/proof-7c19bb?preview=f6e7969d662abf6b71a2df8a37f8ee17

Hi thanks for sharing that!

It looks like the Collection List and the container holding the All button were both set to display: block. This will force nearby elements to clear below.

Instead, you can set both to display: inline-block to allow them to sit next to each other horizontally.

Here is a GIF showing these steps: Screen Recording 2017-06-28...

Hope this helps! :slight_smile:

Great, @brando, but the still both the collection list and the All button, have some unrequested indent, which I can lose no matter what I do.

Float Collection List left

Add internal padding to offset negative margins

1 Like

Sorry, @samliew
The indent is still there. Plus I got some space on top, which is not assigned anywhere.
Any ideas

?

Oops, your collection list should be display block. Usually if you float stuff it should be either block or inline-block (no difference either way).

2 Likes

Looks good. Thank you, @samliew

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