Hi!
I have designed a site for an artist with a vertical masonry grid style like pinterest. I put my CMS collection items (images & text) into a vertical grid by applying columns in the type settings. Looks great in chrome & firefox but a mess in Safari, top row of thumbnails don’t align, titles for images being separated and pushed to the next column, weird spacing, scaling and even ordering when testing the responsiveness etc.
I am still learning my way around webflow and used to designing things with a team of developers behind me so coding things is still foreign to me and I am terrible at it. Critiques of my build are welcome. Below I included some screenshots comparing my layout in chrome vs Safari and Included links to the site below. Hopefully this is an easy fix‽
Hi Sara, if you’re using a CSS columns approach to creating your masonry grid, it’s likely an issue with padding, margins, or image sizes. I’d use Safari’s browser devtools to experiment with CSS changes and identify what’s causing the difference.
If you’re using a JS lib, it may be the settings. You might try a lib like Macy, I generally get good results there.
If applying columns to my elements with the type styling panel in webflow’s designer is using CSS columns than yes I am. Messing with the CSS in Safari’s developer might be above me. I can’t seem to find which elements are causing the issue after messing with everything’s padding, margins etc. on my page for the past 30mins. I probably built the whole thing wrong anyway.
I like the idea of using the macy script so content is ordered left to right instead of up and down. Anyway you could adjust your example so webflow’s designer view looks closer to what the real site looks like? 3 columns instead of 2?
I think you might be referring to Philipp’s cloneable?
There should be a way, but you’d need to experiment as it depends on how Macy performs the CSS and HTML changes.
I’d try simply doing a grid layout on the collection list, and see if that breaks anything in Macy’s output.
Figured out how to get webflow’s designer view closer to what goes live. Using Macy wasn’t as terrifying as I thought it would be. Thanks for the encouragement. Here is the latest read only link
Maybe I’ll clean this up and make a clone-able project in the future…maybe.
