3 column blog listing template HUBL for loop problem
Hello,
I’m having problems with a 3 column blog listing template that I added a search to. My grid breaks and doesn’t start a new row. I have the listing number set to 9, however don’t think this is the issue. Believe it breaks when it iterates over the loop and finds a post that doesn’t match the search query. Here is my code:
So it looks like you’re grouping the listings in a <div> with a class of row based on the for each index. The issue is that when there’s a filter applied, you’re preventing certain listings from rendering but they’re still items in contents. This messes with your row divs, since these divs are only included before items with an index divisible by 3.
I’d recommend not using the index to format rows of blog posts, since this will break when posts are filtered out. I’m not sure the best way to restructure the listing page to format the blog posts in rows of 3; you might consider structuring the page with CSS instead of HubL conditionals and HTML.