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');
console.log(resourceThumbnails);
// Get all elements with class .css-zg1vud
const resourceUpvotes = document.querySelectorAll('.css-zg1vud');
console.log(resourceUpvotes);
// 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');
wrapperDiv.style.display = 'flex';
wrapperDiv.style.justifyContent = '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
resourceThumbnail.style.float = 'left';
wrapperDiv.appendChild(resourceThumbnail);
// Append the resourceUpvote to the wrapper div with right alignment
resourceUpvote.style.float = 'right';
wrapperDiv.appendChild(resourceUpvote);
});
}
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?
