I’m stuck trying to align this dynamically (ACF Repeater) generated list of tags in a row. I can’t seem to figure out what flex setting to use. I guess there’s an error in my logic, but I can’t find out what…
When I add static labels, they all align as they should, but as soon as I use a query, the tags get stacked on top of each other.
What am I doing wrong?
Thanks
Can it be fixed with display: inline?
Hey there! No, I tried inline and inline-block, but that didn’t fix the issue, unfortunately.
Try changing the element from a block to a div.
A link to the page will be helpful. Are you making this site online? Or local?
Wrap the “Skills” tag Query with another Block and set the Block’s width =100%, direction = horizontal / row, flex wrap = wrap, column/row gaps = 8px (or any value you like). Then set the “Skills” tags width to auto.
Structure:
Skills Wrap:
Skills Tag:
The reason for the layout isn’t doing what you want is because the “Skills” is in a Block that is Vertical / Column by default. So all your elements will be stacked, including the queried Tag elements. You need to wrap it in another Block / Div with the correct style settings to ensure that the Tag elements will flow horizontally.
Thank you, everyone! I changed the block to a div and put the query loop on that, and it worked like a charm. I think I need to rewatch some tutorials on the use of blocks vs divs in Bricks.
