Streaming live at 10am (PST)

Typography Columns Splitting Content

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

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+ */

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

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.