Columns breaks ugly

Design help Layout & Design
1

Hi guys!
I having a problem I can’t manage to fix. I have four collections in a div-block, which I have set to columns. The problem I have is that it breaks not the way I want it.
On bigger screens one of the headings is falling to the first column, and I always want it to be in the second. On ipad and phone it looks good, and I really want to use it as columns because my costumer wants the site to look like an old magazine. So if I’m using i grid instead, I don’t get the magazine feeling when I make it responsive.

This is how it looks

Skärmavbild 2022-11-26 kl. 09.21.10
Skärmavbild 2022-11-26 kl. 09.21.101798×884 180 KB

This is how I want it to look.

Skärmavbild 2022-11-26 kl. 09.22.34
Skärmavbild 2022-11-26 kl. 09.22.341920×899 197 KB

Here’s my link
https://preview.webflow.com/preview/rojsmon?utm_medium=preview_link&utm_source=designer&utm_content=rojsmon&preview=a408a4a247cae28612aa5769841c0b8d&workflow=preview

Many thanks
Sandra

2

I’ve sketched the list item frames around each of these items. I’m assuming that on these block boundaries is where you would want to allow column breaks to occur.

To prevent columns from breaking inside of your items, you can add a custom CSS style to the list item.

e.g. on the Collection List Item, add a class of no-col-break,
And then drop an HTML embed on the page with this CSS;

<style>
.no-col-break {
  break-inside: avoid;
}
</style>

image

3

Hi @memetican
Sorry for the delay, I had a few days off.
And thank you for your help, but I can’t make this to work.

I have added a HTML code to my page mith the CSS. And I’ve added a class named “no-col-break”

What am I doing rong?

4

Ah, the CSS property name has changed, it’s now just break-inside.
I’ve updated above.

Also you have applied the class to BOTH the Collection List and the Collection Item.
You want it ONLY on the Item, or else you’ll get one long unbroken column.

5

@memetican Thank you so much, it work now!

Have a nice day!

6

Awesome Sandra, please mark the solution so people can find it. Glad it worked!