I have a dynamic collection item catalog/overview section (Ecommerce/CMS) on my page.
The amount of columns (items across the page) changes at each breakpoint – this is done by changing the % width for the collection-item for each breakpoint.
I use an embed code to set the gap width between the items/columns – it’s set to 3% for desktop. It works well but of course when you get down to mobile and two items across, the gap of 3% gets proportionally too small.
My question: is there a simple way to tell the embed code to use a different value at each breakpoint (something like 3% on Desktop, 4% on tablet; 6% on mobile), or can I do some kind of conditional trick to achieve something like: when it has 5 items across use 3%, when it has 3 items across, use 4% and so forth?
Here’s what I’ve done based on my limited understanding of code and media queries. Not sure if that’s the best/right way – it seems to do what it’s supposed to do for now.
I added the following embed code to the top of the page (I guess it would also work page-wide, if added to the before body tag?). I noticed that I had to add larger breakpoints as otherwise the gap disappeared when I had the browser open wider (even though I refuse to use WF’s larger breakpoint options as they seem to not be intuitive and cause all sorts of issues).
You can always use min-width to handle scenarios where you want a style to apply up from there. Conditionals are also an option. Just takes some tweaking to dial in what you want.
Thanks again, Jeff!
So min-width would sort of cascade up from that defined width point - in my case it would tell the browser “from this width up make the gap XY px wide”, correct?
If so that’d be helpful as I could skip some of the higher breakpoints.
As long as it keeps a gap I don’t care so much what it looks like exactly beyond 1400 px, not for this use case (small shop) anyway.
