How do I create balanced columns?

Hi Jerold

Have you tried using Page Builder for this. Creating layouts is at the very core of what Page Builder was built to do. If you’re not up to speed with using Page Builder, please check out our documentation here:

Page: Getting Started With Page Builder

See “Setting row layout” Page: Building a Page

On any given page, click over to the Page Builder tab, next to Visual/Text. Since you’re testing do this on a new page. Click the second Page Builder button called Add Row, the modal window opens up. Enter three for the amount of columns you want here for testing. Then click the Insert button found at the very bottom right of the modal window.

At the top of this page: Page: Page Builder Plugin you’ll see a link to watch the Page Builder video. It’s more an overview video but you’ll see the plugin in action.

The insert button is shown in blue, at the bottom right of images 2, 3 and 4 on this page:

Page: Building a Page

If you’re experiencing anything other than what you see in the tutorial, it’s possible you might have a plugin conflict. In that event you should try testing with just Page Builder activated and all other plugins de-activated.

Ahh right. Apologies for this, I wasn’t quite sure what you were after but understand now. CSS columns can achieve what you’re after. What you could is insert a Text widget for the HTML and use Appearance > Custom CSS to store CSS. Here is an example from: http://css-tricks.com/guide-responsive-friendly-css-columns/

Insert the following into a Text widget:

<article>
  At noon they sat down by the roadside, near a little brook, and Dorothy opened her basket and got out some bread.  She offered a piece to the Scarecrow, but he refused.


  “I am never hungry,” he said, “and it is a lucky thing I am not, for my mouth is only painted, and if I should cut a hole in it so I could eat, the straw I am stuffed with would come out, and that would spoil the shape of my head.”


  Dorothy saw at once that this was true, so she only nodded and went on eating her bread.


  “Tell me something about yourself and the country you came from,” said the Scarecrow, when she had finished her dinner.  So she told him all about Kansas, and how gray everything was there, and how the cyclone had carried her to this queer Land of Oz.


</article>

Then insert the following under Appearance > Custom CSS:

article {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}

Give that a go.

If you’re using Page Builder then the HTML portion of the suggested code needs to go in a Text widget. If you’re not using Page Builder then the HTML portion should go in the Text tab, not the Visual tab.

This example will work on any page. Perhaps just change the CSS portion to:

.entry-content article {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}

The above goes under Appearance > Custom CSS, adjust the column count as required.

The following then goes in a Text widget or the Text tab when editing a regular page:

<article>
  At noon they sat down by the roadside, near a little brook, and Dorothy opened her basket and got out some bread.  She offered a piece to the Scarecrow, but he refused.


  “I am never hungry,” he said, “and it is a lucky thing I am not, for my mouth is only painted, and if I should cut a hole in it so I could eat, the straw I am stuffed with would come out, and that would spoil the shape of my head.”


  Dorothy saw at once that this was true, so she only nodded and went on eating her bread.


  “Tell me something about yourself and the country you came from,” said the Scarecrow, when she had finished her dinner.  So she told him all about Kansas, and how gray everything was there, and how the cyclone had carried her to this queer Land of Oz.


</article>

1. Have you perhaps managed to resolve this? Looks good on my side, unless I’m missing the question.

2. The spacing is there because you’re using paragraphs. If you’d like to stick with that format, try the following under Appearance > Custom CSS:

.entry-content article p {
margin: 0.5em 0;
}