Controlling column breaks

Hi,

The new rich text box with columns is awesome but I want to control column breaks. It shoule work with css, break-inside and break-after, see break-inside - CSS: Cascading Style Sheets | MDN. So I put this into my custom code for my classes but it wont work. If I take a look at the published page with the inspector the break-properties has a strikethrough and it says unknown property. Anybody knows how to use these css properties with webflow?

It’s pretty well supported Can I use... Support tables for HTML5, CSS3, etc

Can you please update your post so it’s easier to understand your issue and help you?

Please consider:

  • giving us you projects’ sharing link (see how below)
  • tell us on what page, and what element you need help
  • add a commented screenshot of the issue, and a sketch of how you want it to look, if needed

http://vincent.polenordstudio.fr/snap/sharing_link_r2.png

You can find detailed information about this here too: Share a read-only link | Webflow University

Thankyou for your answer. My site is confidential until final release so unfortunately I cannot share my project but I will try to describe it better.

In my custom code section I have added “h2, h3 { break-after: avoid-column; -webkit-column-break-after: avoid; }” and this works fine i IE but not in Chrome. But from the link you provided me I guess this is not possible with Chrome and Webkit, atleast not with “avoid” which is the property I want. Is there is any workaround?

Without being able to inpect the production version, there’s not a lot I can do.

OK, I made a copy of my site with lorem text so that I can show you my problem.
https://preview.webflow.com/preview/sfeitest?preview=32ea3ead0d69ecb1bf71e84f78d36f30
(and published to http://sfeitest.webflow.io/)

You should be able to see the problem at the bottom of the page with the header EMIR, the css should avoid column break after H2 but it doesnt work in Chrome and webkit broswers, though it works in IE. (But ofcourse, different broswers renders the page differently and you will only see this error if you happen to have a H2 at the very end of any column)

See my attached picture:

There is also another css problem/error/bug within the rich text box with columns. The first h2 in the rich text boxes behave differently than the others. See my other uploaded picture. It seems like the first H2 in the rich text box get other css properties than the one I have given them. How is this even possible? I want all H2 to be the same.
Please see if you can help me with these two problems.

Interesting… and nice grid design btw.

I played with it with various browsers and it doesn’t act as you expect it to. I need to read more abt these properties, are they supposed to work like that?

oh thankyou. you should see the grid on the “real” site :wink: …well it will be released next week and then I can post it. hopefully I will solve everything till then.

Problem 1:
break-after: avoid-column; should work, and works in IE. i think it works in Safari too. Hopefulle Chrome in the future.

-webkit-column-break-after: avoid; should work in webkit browsers but some websites say that it only works with auto or always and not avoid so I am not sure. I want to find a solution for it to work in Chrome though… or if I can get it to work with any other property that is okay too.

Problem 2:
Do you know why the first H2 in each rich text box behave differently? this I just cannot understand. Maybe it is a bug…

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.