Card-columns Embed Instragram Posts : Difference Between Chrome and other browsers
why not use row
and col
? Wrap the col-sm-6
class inside the row
class. If you need to display 3 items in a row, then use col-sm-4
.
<div class="row card-columns">
<div class="col-sm-6 card p-4" style="border:none;">
...
</div>
<div class="col-sm-6 card p-4" style="border:none;">
...
</div>
</div>
Demo link: https://codepen.io/sudheer-ranga/pen/bGVWwez
There's definitely something wrong with CSS columns
in latest Chrome. At a glance, it's related to having an <iframe>
inside a child of a columns-count
parent.
While waiting on a fix, the only decent way of meeting the requirement ("display posts instagram (from top to bottom and left to right) with masonry effect") seems to be actually using masonry:
https://jsfiddle.net/websiter/oup2dkh5/
Notes:
- changed
.card-columns
to.masonry-cards
(so thatcolumns-count
no longer applies). - added a tiny function to init masonry and another one to refresh layout after instagram posts are transformed.
- traded
.p-4
on cards for.my-2
withgutter: 24
in masonry options.
Also addedmx-auto
, forced container to100%
andfitWidth: true
on masonry to center the cards in available space (otherwise they're either left or right aligned, based on masonry'soriginLeft
config option) - added appropriate widths for cards on different responsiveness intervals
LGTM.