Displaying 'List with Small Cards' in mobile mode for wider cards in a two-column layout

Ask the community
1

Hello Softr Community,

Inspired by the legendary @matthieu_chateau and his community post (New custom code - Display two blocks next to each other with a drag border feature), I’ve successfully implemented a dual-column layout for my project. The CSS and JavaScript codes shared in the post were instrumental in achieving this layout, allowing me to present content side-by-side on desktop screens.

However, I’ve encountered a challenge. My goal is to have the ‘List with Small Cards’ block display in a “mobile” mode even when using the dual-column layout, aiming to allow the cards to appear wider for better readability.

Capture d'écran 2024-03-02 à 20.50.03@2x
Capture d'écran 2024-03-02 à 20.50.03@2x3000×1124 189 KB

Because of the column, the columns (3 columns wide) are very cramped and the text stacks vertically.

Despite following the guidelines and trying to ajust my CSS for mobile responsiveness, the ‘List with Small Cards’ block does not resize as intended.

Could anyone offer insights or suggestions on how to modify the CSS or add custom JavaScript to ensure that the ‘List with Small Cards’ block expands appropriately on desktop devices like a mobile device?

Thanks by advance !! :sunflower:

2

Hi Lea!

Thanks!

Did you try to make the custom code block only visible on desktop?

3

Hey Matthieu ! Do you mean only visible on mobile? Not sure to understand

The idea is to display the block in its mobile responsive version when I display it in the small column at 30% on desktop. So “manipulate” Softr’s responsive to make it believe it’s a mobile.

So the cards in my lists will no longer be in 3 columns but only 1, and will fit the entire surface of the column by 30% on desktop.

:sunflower:

4

No idea how to do this.

But the side by side blocks are coming soon, natively! Check the new Softr roadmap.

1 Like
5

Thank you for your response, I just saw the updated roadmap “Flexible block arrangement options” to “In Progress”, I will still ask support if they have an idea for a solution during their bulding :slightly_smiling_face:

6

Hello @lea, I’m not sure I’m following the conversation but following the title, this CSS can help you to display the ‘List with Small Cards’ with 2 columns on desktop and tablet and 1 column for mobile.

<style>
 @media screen and (min-width: 567px) {
     #BLOCKID .content-section .list-container>div>div {
        flex-basis: 50%;
        max-width: 50%;
    }
 }
</style>