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?
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.
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
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: https://cl.ly/243h1C3V2P45
Hope this helps!
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.
The indent is still there. Plus I got some space on top, which is not assigned anywhere.
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).
Looks good. Thank you, @samliew
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.