It’s a purely CSS-issue.
Your current css on the recipy-boxes are:
width: 33.33%; float: left !important; margin-bottom: 30px;
With this CSS, if the boxes are not of equal height they will not appear on a clean row unless you put in like a clear:both after every three boxes before each new row (which does not work well when you want to change row-count for smaller devices). So instead try changing the css to this:
float:none !important; margin-bottom:30px; width:33%; display:inline-block; vertical-align:top;
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
© 2022 Advanced Custom Fields.