I’m boggled by this one. I’m building a site that looks great in FF, Chrome and Edge. It’s mostly readable in IE11 except for the two images (under Menu) which are inside a Bootstrap 4 grid. It makes space for them in the layout, but the images don’t appear. Other images on the page appear just fine, even ones inside a grid. Removing img-fluid alone doesn’t fix it. Removing class=“card wow fadeInUp hoverable” from the wrapper alone doesn’t fix it. However if you remove both, the image will appear, but will not be responsive. If I add max-width:100%, it breaks again. So I guess that’s the issue, but it has to be a conflict with something else, as the Bootstrap 4 documentation looks fine. I’ve replaced the images with text to check the grid, it’s fine. Any help would be appreciated.
<section class="lw-reverse lw-bg-repeat lw-center lw-loose container-fluid" style="background-image: url('templates/liquidwinter4/img/lw/bg-sl-diamonds.png');">
<h1>Menu</h1>
<div class="row">
<div class="col-md">
<div class="card wow fadeInUp hoverable"><a href="images/Menu1.jpg"><img class="img-fluid" src="images/Menu1.jpg" /></a></div>
</div>
<div class="col-md">
<div class="card wow fadeInUp hoverable"><a href="images/Menu2.jpg"><img class="img-fluid" src="images/Menu2.jpg" /></a></div>
</div>
</div>
</section>
Site: http://wickedpickle.us
