Custom embed HTML code – individual value for each breakpoint

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?

This is what media queries are for in CSS. See Using media queries - CSS: Cascading Style Sheets | MDN

Thanks, Jeff,

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).

<style>
/* Setting the gap 
between collection list items 
for each breakpoint */

/* Largest Breakpoint */
@media (max-width: 2400px) 
{
.collection-list {
	gap: 2.125%;
}
/* Larger Breakpoint */
@media (max-width: 1920px) 
{
.collection-list {
	gap: 2.5%;
}
/* Large Screen */
@media (max-width: 1440px) 
{
.collection-list {
	gap: 2.5%;
}
/* Desktop */
@media (max-width: 1280px) 
{
.collection-list {
	gap: 2.75%;
}
/* Tablet */
@media (max-width: 991px) 
{
.collection-list {
	gap: 3%;
}
/* Mobile Landscape */
@media (max-width: 767px) 
{
.collection-list {
	gap: 4%;
}
/* Mobile Portrait */
@media (max-width: 478px) 
{
.collection-list {
	gap: 4%;
}
</style>

Feel free to share your opinion/solutions.

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.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.