Flexbox Alignment Error

Design help General
1

Having trouble getting items in a dynamic list to align correctly when using Flexbox and wrapping the children. Only the top row isn’t aligning when I choose “Justify: Space Around” or “Justify: Space Between”. I’ve attached a screenshot of the problem, and my read only link is below. This is specifically on the page titled “Blog” at http://vetpronto1.webflow.io/blog

1022×554 492 KB

https://preview.webflow.com/preview/vetpronto1?preview=45457aec2c49ad7408f8f89484307ebd

Here is my public share link: LINK
(how to access public share link)

2

Under class “Recent Post Item” then changing the flex order to Order-First fixed this for me?

3

Thanks @Matty, that did the trick!

Separate question, the Recent Post Item has rounded corners (4px), and overflow is set to hidden, but when I hover over the link, the resulting interaction seems to remove the rounded corners on the top right and left. Any idea why?

4

@jordanshotwell

Your welcome :slight_smile:

Under “Recent Post Item” class set the z-index to 2000

Happy new year :slight_smile:

5

Hey @Matty! Another question related to this. For some reason the second row isn’t aligning like the first, since there are only 5 items in the collection and not 6. I’ve included a screenshot and link below. Any idea why this is happening? It’s on the page titled “Blog”.

Preview Link

Page Link

1366×638 363 KB

6

Hi @jordanshotwell

You could try the following;

“Recent post list” then center the element.

Then go to “Recent Post Item” Then give it a left margin to separate the blocks

I’m still getting my head around Flexbox so someone else might have a better solution :slight_smile:

Cheers
Matt