[Patrick ZParticipant]

Hey X Team

This is very, very strange!!! I mean, you’ve seen my screenshots, right? As a matter of fact, the section looks even more unbalanced right now. I also tried to delete it and then set it up again, but it didn’t solve the problem.

Which Chrome version are you using?

Patrick

[RadModerator]

Hi Patrick,

My chrome version now is 40.0.2214.93, I updated it recently (actually, it updates automatically). And the unbalanced columnize rendering is fixed on this version. My last test was a week ago and was using the version 38 or 39, as part of my reply at Jan 24th. Again X shortcode columnize is using css, and it’s depends to the browser on how it will interpret css.

Please update your chrome too.

Thanks!

[Patrick ZParticipant]

Well look, I am on the newest Chrome version aswell (as you said, it updates automatically), but my section looks still like this: http://www.tv-magden.ch/wp-content/uploads/2015/01/Chrome-not-balanced.jpg. Looks like we are not going to solve this mystery…

[AlexanderKeymaster]

Hi Patrick,

I’m sure we can get to the bottom of this. Maybe we’re just not seeing the problem? I can’t seem to find the content from that last screenshot you posted. Could you point us in the right direction so we could see that on your site? At this point, it would help if we can see the problem reproduced on your site.

Our columnize shortcode should work in all modern browsers without the need for additional CSS or workarounds. I’m not sure what it is with your site, but I hope we can get to the bottom of this together.

[Patrick ZParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hey Patrick,

Try this code in Appearance > Customize > Custom > CSS:

.x-columnize {
-webkit-column-count: 2 !important;
}

Let us know how this goes!

[Patrick ZParticipant]

Hallelujah! It works! Thank you!

[ZeshanMember]

You’re welcome!

[Patrick ZParticipant]

Okay, after the first excitment this seems still not be the solution 🙁

First of all, it worked for a while, but then the columnized columns appeared to be unbalanced again in Chrome (I really don’t know why, but it is a fact!). Second, this CSS code causes that columnized text will appear in two columns on mobile devices, which is a no go! This is not how the columnized shortcode is intended to work.

[RadModerator]

Hi Patrick,

You can limit it on desktop only,

@media (min-width: 980px) {
.x-columnize {
-webkit-column-count: 2 !important;
column-fill : balance;
}
}

And sorry for the confusion at #196651, It’s working on my end on that time too. There is really something weird on chrome.

To address this efficiently, I created a really simple content here using columnize css that is not really related to X scripting. Now try testing it on chrome and safari while resizing the output window (to see the balance at work). As you can see in safari, it balance automatically but not in chrome. This is chrome’s limitation. There is another styling like column-fill: balance; but it isn’t working on chrome either.

More related issues here
http://stackoverflow.com/questions/28207707/unbalanced-css-columns-in-chrome
http://css-tricks.com/almanac/properties/c/column-fill/

With this limitation on chrome, I’ll add this as future enhancement or maybe we will look for another alternative than using css. And with that, I can’t guarantee a sooner implementation.

Thanks for understanding.

—

Update : After few more tests, I got random result : And now all browsers on my end (MAC safari, chrome, firefox) are not balanced as I resized the test output. And more result from my search, here is a compatibility table http://quirksmode.org/css/columns/ .

[Patrick ZParticipant]

This is very interesting! Thank you for sharing all this!

It does not solve the problem, though, and therefore I got rid of all the columnize shortcodes on my website and set it up manually (i.e. with content bands and then split the text into the two columns myself… it was a lot of work!).

Hopefully this will just be a temporary “fix” and you’ll find a way to provide to us a working columnize shortcode in the future. It would be very helpful to have the content always balanced on different screen sizes like tablets, which is now not always the case with my manual set-up.

I really liked (or would like) the columnize feature…

[Paul RModerator]

Hi Patrick,

Yes, that would be the temporary fix for now, make content band in two columns.

We’ll probably replace it with a javascript based columnize feature until major browsers support the columnize css code.

Thank you.

[DamDo92Participant]

Hello Themeco Staff,

I am indeed having the same issue. Please see two screenshots attached. The text and single image is evenly distributed in Safari and Firefox but not in Chrome.

Thank you for your help

Best regards

[Paul RModerator]

Hi,

Can you provide us your site url so we could take a closer look.

Thanks

[Author]

Posts