How to change alignment of list details block

Hey,

i am trying to center the cards within a softr “list block with vertical cards” via custom code, which has not worked so far.

Context:

We use the list view to show just one card element in our softr app.
Users can take action via buttons on the one displayed card. This will change the status in airtable so that a new element gets filtered into the list view, and the user can take action on the next card.

Problem:

We want the one card we display in the list block to be centered in the middle of the page.

But the Softr List block is left-aligned and we can’t adapt this style within softr.

So far we have played around unsuccessfully with different custom code snippets to either center all elements within the list block or change the left margin property of the list block, so that the card which we display appears in the center of the page.

This is one of our not working “custom code attempts”, where “list1” is the respective list block which we use:

<script>
    document.addEventListener("DOMContentLoaded", function () {   
       document.getElementById("list1").style.margin-left = "200px";}
</script>

Any ideas on how we can solve this are highly appreciated, thx for your help!

1 Like