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

Popular posts from this blog

networking - Vagrant-provisioned VirtualBox VM is not reachable from Ubuntu host -

c# - ASP.NET Core - There is already an object named 'AspNetRoles' in the database -

ruby on rails - ArgumentError: Missing host to link to! Please provide the :host parameter, set default_url_options[:host], or set :only_path to true -