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?
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?
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)
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.
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 …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…