twitter bootstrap - Images falling outside css columns on iOS -
i using css columns display images of assorted widths , heights flow without large white spaces. works on desktop browsers, on ipad , iphone (using ios chrome), last images in list fall outside of columns, appearing right of columned container.
i've been troubleshooting properties , can't make ios obey.
example page: https://gohbavote.ca/round-1/entry-26
here's html:
<div class="post-gallery"> <a href="[full img url]" data-lightbox="[lightbox-tag]" class="lightbox-item"> <img src="[thumb img url]" class="lightbox-img" alt=""> </a> <a href="[full img url]" data-lightbox="[lightbox-tag]" class="lightbox-item"> <img src="[thumb img url]" class="lightbox-img" alt=""> </a> <a href="[full img url]" data-lightbox="[lightbox-tag]" class="lightbox-item"> <img src="[thumb img url]" class="lightbox-img" alt=""> </a> <a href="[full img url]" data-lightbox="[lightbox-tag]" class="lightbox-item"> <img src="[thumb img url]" class="lightbox-img" alt=""> </a> <a href="[full img url]" data-lightbox="[lightbox-tag]" class="lightbox-item"> <img src="[thumb img url]" class="lightbox-img" alt=""> </a> </div><!-- .post-gallery -->
css:
.post-gallery { display: block; float: left; line-height: 0; min-height: 24px; -webkit-column-count: 2; -webkit-column-gap: 0px; -moz-column-count: 2; -moz-column-gap: 0px; column-count: 2; column-gap: 0px; width: 540px; border: 4px solid red; /* can see boundaries of container */ } .lightbox-item { display: block; float: left; padding: 8px; width: 100%; height: auto; } .lightbox-img { display: block; float: left; margin: 0; padding: 0; width: 100%; max-width: 100%; }
can see i'm missing? ios need special setup work columns? or css blame? in case it's relevant, site built on top of bootstrap 3.3.7.
the issue .lightbox-item set display:block , float:left. once set these display:inline-block , float:none, ios devices displayed images correctly in columns.
Comments
Post a Comment