I’ve gotten this to work before, but it’s not working on the site I’m currently building. The content is dynamically generated via shortcode that’s pulling data from posts.
Screenshot below. Any ideas why it’s not working?
If I apply multi-column to another text block on the page, it does break it into columns. Just not sure why it’s not working on the text element in question.
Hello @cheshiredave,
Thanks for writing in! If the shortcode returns HTML wrappers that might create an issue with the wrapper of the Text element, that could be cause why the multi-column layout does not work. To better assist you with the issue, please provide us the URL of the page where we can find this element so that we can inspect and investigate further.
Best Regards.
That was quick, thank you! I just figured out that if I apply column-count to a div that wraps around the shortcode output, I can get the columns to work. Though now I have to figure out how to not let it break between the h3 and h4 pieces.
Here’s the URL:
Getting closer – I got the columns to work, now just need to figure out how to force the columns to line up on top in Safari (looks right in Chrome/Firefox). (Vertical-align doesn’t seem to be working.)
Hello @cheshiredave,
Your first row is using 2/3 + 1/3 layout while the second Row where you have that Text Multi-column setup is using 1/2 + 1/2 layout. You cannot make the 2nd Row be align on top unless you will change it to the same column layout settings.
Kindly let us know how it goes.
Odd – I’m not sure why you’re seeing 1/2 + 1/2 on the lower row. As far as I can tell it’s one column at all breakpoints.
Hello @cheshiredave,
Yes, it is using one column layout but then with the Text element’s Multi-column set up, if you set it to 2, it will automatically make two columns just within the Text element’s content.
Hope this makes sense.
I don’t really understand that distinction to be honest, but having figured out my workaround I can live for now with not knowing. 
Any idea why vertical-align: top isn’t working for the columns in Safari? Works in Chrome/FF.
Hello @cheshiredave,
I am now seeing this:
I am not sure where you want to position the text. I think, vertical-align: top is not the right attribute you need for your desired layout.
Please explain further. Thanks.
Now it’s working correctly. I think that Safari doesn’t like when it’s trying to balance an uneven set. When I have 11 jobs listed, it’s uneven. When I have 12 jobs listed, no problem. Guess it’s just a Safari thing I have to live with. Thanks for all your speedy responses!
LOL when it looks good on desktop Safari it looks wrong on mobile Safari and vice versa. Guess I still have to find an actual solution.
Followed someone’s advice to make the individual elements within the block to have display: inline-block and width: 100% applied, which has mostly solved the problem. Still wonky between desktop and mobile but I can dig in and use media queries to finesse it, I guess.
Hey @cheshiredave,
It’s good to know that. Thanks for sharing the information. 1. Should you need any further information, please do not hesitate to create another thread.
Cheers.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
