Hi folks, I need some CSS insight. I posted this question on SO, but got no answers, so hoping some folks here can share their experience.
Please take a look at this codepen: http://codepen.io/pliablepixels/pen/YwWLzy
My goal is to create a multi-column image gallery of different images with the columns changing dynamically. As you change the column value above you will see in some cases the header of the image is in a different column from the image.
How do I make sure the header and image are always attached in the same column? Also, you will notice the header text is out to alignment - not sure why that is happening as it doesn’t happen on devices - so please ignore that for now.
Hope someone who is good at CSS can tell me how to fix my problem. Needs to work in both Chrome and Safari.
Thanks!