[Steve SParticipant]

I’m sure this has an easy solution but I’m having trouble figuring it out.

When using [columnize], how can I choose where to break for the second column? In other words, if I just leave it up to the shortcode sometime the break is a line or two off.

If I should use [column] for this, can you give a quick overview on how to break the column?

Thanks.

[SupportMember]

Hi Steve,

Columnize will always balance the texts within it.

Column will give you much more flexibility with the content you put in it. See the tutorial video for more details: http://theme.co/x/member/kb/shortcode-walkthrough-column/

Thanks!

[Patrick ZParticipant]

“Columnize will always balance the texts within it.” > Not in Google Chrome, unfortunately!

If you use a picture inline with your text, then the columnize shortcode gets confused and does not balance the text. I am using quite a lot of columnized text on my website http://www.tv-magden.ch and just realized that in Google Chrome it does not look good :-(. Also, the hyphenation CSS does not work in Chrome…

In Safari (where I develop) everything works fine (i.e. columnize with pictures and hyphenation). Do you have any solutions for me, X Team?

[Nabeel AModerator]

Hi Patrick,

Thanks for writing in! Please add the following CSS code via Appearance > Customize > Custom > CSS:

.x-columnize p {
margin: 0 0 0.5em !important;
}

Let us know how this goes!

[Patrick ZParticipant]

Nope, it does not work in Google Chrome. Text with inline pictures still is not balanced between the two columns. Any other possible solutions?

[FriechModerator]

Hi there,

Text can be one of the trickiest to work with. It does not alter its appearance or change size easily like certain other elements do (e.g. images). However, with X we’ve worked to address this with our [responsive_text] shortcode, which allows you to target certain groupings of text and have them change their size as the browser window is resized. More info about responsive text here.

Hope it helps, Cheers!

[Patrick ZParticipant]

Yes I am aware of the responsive text in X, but this doesn’t solve this “bug” with the columnize feature, does it?

I mean, in Safari it works fine, why doesn’t it in Chrome?

[Paul RModerator]

Hi Patrick,

To make sure we are on the same page.

Can you send us a screenshot where we could see the issue you are referring too.

Thanks

[Patrick ZParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Patrick,

Chrome doesn’t support hyphens, the only CSS property that Chrome supports is -webkit-hyphens: none which is the default value (i.e. no hyphens). You can check CSS hyphens browser support here: http://caniuse.com/#feat=css-hyphens

This is the reason you are seeing a little different columnize layout in chrome and safari. So if you want to remove hyphens entirely from all browsers, you can use following CSS under Custom > CSS in the Customizer:

p {
   -webkit-hyphens: none;
   hyphens: none;
}

Cheers!

[Patrick ZParticipant]

Hi X Team

Sorry, but that is not the solution. Even if I turn hyphens off, in Chrome the columnized content is still not balanced betweend the two columns. I just tested it with a negative result.

I am aware that Chrome does not support hyphens but it has nothing to do with the unbalanced columns.

Patrick

[RadModerator]

Hi Patrick,

Are you referring to same height columns right? Unfortunately, that is again a chrome’s css limitation.

Styling can be define like this

-webkit-columns: 300px 2;
   -moz-columns: 300px 2;
        columns: 300px 2;

300px of 2 columns.

X uses it like this,

.x-columnize {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em;
-webkit-column-rule: 2px solid #e5e5e5;
-moz-column-rule: 2px solid #e5e5e5;
column-rule: 2px solid #e5e5e5;
margin: 0 0 1.5em;
}

There is no special coding that construct these columns. It’s being controlled by css and it’s depend on the browser how it will be rendered.

You can check it here http://stackoverflow.com/questions/19791616/css-column-count-columns-differ-in-height

Thanks!

[Patrick ZParticipant]

So basically what you are saying is that your own X columnize shortcode does not work with Google Chrome browser???

[Patrick ZParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Patrick,

I have tested your page in Chrome and Safari both on Mac, I couldn’t see any differences other than hyphens in both browsers. Please see these screenshots:

Chrome: http://prntscr.com/5xn0je
Safari: http://prntscr.com/5xn0b6

Thanks!

[Author]

Posts