Typography Columns Splitting Content

[MatthewBowker]

Hi everyone,

So recently I have been trying to make an events page using dynamic content and a masonry style grid system which I’ve discovered can be done using Typography options. More specifically Typography Columns however the div blocks containing the event img, name and other information is being split between two columns (see image as an example). Is there a way to ensure everything within each div is displayed together as a block whilst also maintaining the masonry grid style?

https://preview.webflow.com/preview/plymouth?utm_medium=preview_link&utm_source=designer&utm_content=plymouth&preview=543fc97d98bdf56c423e78a2705287d6&pageId=5d565b8dcfab3bb54bfb9e6a&mode=preview

Thanks in advance.

Matt

[vincent (Vincent Bidaux)]

Add this custom css code tothe class of your column block element (the one that should not break).

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */

[MatthewBowker]

Thanks Vincent Is it not possible to do within Webflow UI?

[vincent (Vincent Bidaux)]

No, simply drag an Embed Component in the page and add the code. If the class of your element is “block” for example, then use the following code:

<style>
.block {
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */
}
</style>

You will see the effects directly in the Designer, instantly.

[Josh.B (Joshua Bruce)]

Greetings. @vincent I am having the same issue and believe that I implemented your solution (see below) correctly (see my screenshot) and is still not rendering correctly. Anything I should adjust?

Here is a working preview in the designer.

<style>
.block {
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */
}
</style>

[adibam (Droidy)]

Hi Joshua, did you ever manage to solve this? I’m having the same issue

[Josh.B (Joshua Bruce)]

@adibam I have not resolved this yet. If you do, would you mind letting me know!

[bruh (shop.com)]

@vincent would love to find a solution for this! It seems the code did not work properly. I can’t seem to figure it out either.

[sergiovm (Sergio)]

Hi Joshua

It’s working for me, despite the warning. Maybe you are not typing the name of the right element? My code is simply:

<style>
.plp-asset {
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */
}
</style>

Where “PLP Asset” is the div I don’t want to break.

Regards

[stevenworrell85 (Steven Worrell)]

Hi, I’m also struggling with this. I have tried to follow the instructions above but still not getting the desired result.

It’s in the more work page. I have 3 columns with the HTML Embed located inside the collection list item and directed at the div I don’t want to split.

Any help would be greatly appreciated.

Thanks,
Steve

Read only Link - Webflow - My Portfolio