Better look of "List with horizontal cards and upvote button" for mobile users

Hi there,

I try to achieve a better look of the “List with horizontal cards and upvote button” block with Custom Code.

When I run this code in the console, everything looks more mobile user friendly (see second screenshot).

if (window.innerWidth <= 575) {
    // Get all elements with class .css-nabdcx
    const resourceThumbnails = document.querySelectorAll('.css-nabdcx');

    // Get all elements with class .css-zg1vud
    const resourceUpvotes = document.querySelectorAll('.css-zg1vud');

    // Loop through each first resourceThumbnail
    resourceThumbnails.forEach((resourceThumbnail, index) => {
      // Get the corresponding resourceUpvote based on the index
      const resourceUpvote = resourceUpvotes[index];

      // Create a wrapper div and set its display property to flex
      const wrapperDiv = document.createElement('div'); = 'flex'; = 'space-between';

      // Insert the wrapper div before the first div
      resourceThumbnail.parentNode.insertBefore(wrapperDiv, resourceThumbnail);

      // Append the resourceThumbnail to the wrapper div with left alignment = 'left';

      // Append the resourceUpvote to the wrapper div with right alignment = 'right';

But when I add this to the custom code section in the header with this trigger:

const blockName = 'resources-list';

window.addEventListener(`block-loaded-${blockName}`, () => {

// code above


The console.log(resourceThumbnails); outputs an empty NodeList.

How can I fix this?

1 Like

@artur, could you please help out? :slightly_smiling_face: