How to create a responsive multi columns paragraph

Design help General
1

Hello everyone. I have a paragraph inside a div which size varies with the screen size. I want this paragraph to split into two or more columns when the div width goes beyond a certain size.
I could make this with columns, but I want the browser to decide how many words should be inside a column, depending on the situation.

Is there a way to make this?
Thanks!

2

The column widget of Webflow will not allow text to pass from a columns to another. You can try to make it work but it’s more for layout than text.

There’s a column CSS property but I guess it’s not in webflow by default because it still is badly supported by some browsers. However, when it doesn’t work, it degrades nicely by just displaying a box of text, without columns.

You can add the CSS to the head of your site in the settings.

.columns3 {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

Add columns as a class to a paragraph, it should split into 3 columns.

There are more options like gutter size and rulers available CSS Multiple Columns

This should not work in Preview mode, only when published I guess.

Edit, it works (: http://sab.webflow.com/columns

Edit: don’t name your class “3columns”, put the digit at the end

3

Thanks a lot! This way the words can go from a column to another. But what I want in the first place is a variable number of columns. Is it possible to fix this as well?
This is my Photoshop mockup:

1249×784 180 KB

579×762 137 KB

ps: I tried with the Webflow widget but it doesn’t allow this.

4

The webflow widget will do exactly that minus the columns for the text.

And unfortunately we can’t change the classes in between devices (yet). So if you use my method for the columns, the columns appear for all viewports. You need more code to make them responsive.

5

As long as I understand, the webflow widget doesn’t allow to have columns one under the other in desktop mode, but just in tablet and mobile. So in desktop mode it just squeezes my two columns.

I’m trying with custom code.
In the w3schools editor I managed to have more or less what I want, adding “column-width”.
Now I’m trying to add it to my paragraph class called “slide paragraph”, but it doesn’t work.
I’m a total noob, so maybe its just something easy to fix.

I added in the tag this:

<style> 
.slide description {
    -webkit-column-count: auto; /* Chrome, Safari, Opera */
    -moz-column-count: auto; /* Firefox */
    column-count: auto;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    -webkit-column-width:300px
    -moz-column-width:300px
    column-width:300px; 
}
</style>