1

I'm using CSS3 Columns like

.Content {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}
.List {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 0px;
    -moz-column-gap: 0px;
    column-gap: 0px;
    display: block !important;
}

and my html looks like this.

<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 List">
  <div class="Content col-lg-12 col-md-12 col-sm-12 col-xs-12">
     My content
  </div>
</div>

I checked my iPad and iPhone diplay by Chrome development tool, and it works fine. However, real iPad and iPhone not showing anythings. How can I solve this?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Changnam Hong
  • 1,669
  • 18
  • 29

2 Answers2

1

Non fully supporting browsers that use the prefix -webkit- have some missing elements which cannot be used.

Webkit browsers do have equivalent support for the non-standard -webkit-column-break-* properties to accomplish the same result (but only the auto and always values). Firefox does not support break-*.

CanIUse - Columns

This pretty much states that webkit browsers (such as those on an iPhone or iPad) do not have even partial support for column-break and therefore you will need to find an alternative such as using JavaScript or having a fallback in CSS.

Columnizer is a good jQuery plugin which creates the same effect but using JavaScript.

Columnizer jQuery Plugin

Stewartside
  • 20,378
  • 12
  • 60
  • 81
  • Thank you for your answer. But I have one question. I download that plugin and apply it to my div like `$('.List').columnize({ columns: 3 });`. And it works what you said. However, **it's hard to handle breaking point.** I want to make my div looks like _pinterest_. Any suggestion about this? Thank you. – Changnam Hong Dec 30 '15 at 06:33
0

After taking a long trip, I found a solution about this problem. What I want to achieve was made my cards look like pinterest. And I used Lightweight Responsive Pinterest Layout with jQuery - Waterfall.

Changnam Hong
  • 1,669
  • 18
  • 29