Elements Not Nesting Correctly in Link Block Wrapper

Design help General
1

Hey guys,

I’m having a problem figuring out why for one of my category collections pages, the link block isn’t correctly nesting the elements inside. It works fine for the “HyperFocus Series” category, but not for the “Eclipse Series” category.

Attached are the pictures displaying the issue below.

Screen Shot 2019-12-26 at 9.37.05 PM
Screen Shot 2019-12-26 at 9.37.05 PM2880×1462 547 KB

Screen Shot 2019-12-26 at 9.37.19 PM
Screen Shot 2019-12-26 at 9.37.19 PM2880×1462 609 KB

Setting it to “Wrap” fixed the centering problem as you’ll see in the next picture but still does not fix the fact that the elements on the “Hyper Series” category aren’t nested correctly in the link block and the border goes over the image.

Screen Shot 2019-12-26 at 9.38.08 PM
Screen Shot 2019-12-26 at 9.38.08 PM2880×1460 629 KB

I’d appreciate any help on this. Thanks a lot in advance.

Site Link: Webflow - Vibe Nutrition

2

I clicked on your link block container and changed the VW to 80 and it centered it in the box. Try that.

3

Hi Joseph,

Thanks for the reply but if I do that it skews the products inside of the other collection i.e. “HyperFocus.”

4

Hi @g4av1n, thanks for the post, I am here to help.

I have made a quick video: Screen Recording 2019-12-28...

I would update the styling on the image to remove the max width and height, set the width to 100%, remove left and right margins set to auto and set the collection list 3 class to a justify center in flexbox settings

I hope this helps

5

Thank you, @cyberdave! You are amazing. Thank you very much, I really appreciate you taking the time to show me what the problem was. :pray:t3: