Force @media breakpoint for List

Ask the community
,
1

Hey! I’m trying to use a list block with the custom 2 column layout.

Capture
Capture1574×1413 103 KB

I’m trying to force the List block into the stacked style (like the phone view) so that the horizontal scroll bar goes away.

I inspected the element and I can see the classes change at the @media breakpoint, but can’t figure out how to force a breakpoint inside the column div

Scroll:

scroll
scroll2230×1153 439 KB

No Scroll:
noscroll
noscroll2230×1153 372 KB

What do y’all think?

2

So I didn’t do anything with the @media breakpoint, but I was able to dynamically change the ‘flex-direction’ of the list objects by using querySelectorAll('#BLOCKID .list-content');
Then used a for loop to apply the style: flexDirection = 'column'; (Note: not ‘flex-direction’, but ‘flexDirection’, I guess when using querySelectorAll(), rather than an array, it creates a NodeList that you can modify using ReAct notation to modify.

Also I added an interval to wait until the content of the list was displayed before I applied the style, even listening for the block-loaded-BLOCKID event didn’t work, so I think there must be another event that fires once the content is shown, but idk what that event is.

Here’s the working snippet for anybody that needs it:

const wait = setInterval(function () {
  const listItems = document.querySelectorAll('#BLOCKID .list-content, #ANOTHERBLOCKID .list-content');
          for (var x = 0; x < listItems.length; x++){
          listItems[x].style.flexDirection = 'column';
         )};
}, 2000);

I’m sure I probably need to clear that interval to keep it from firing every 2 seconds, but as now this is working so I’m gonna call this one solved.