Tonyobyo Tonyobyo - 23 days ago 15
CSS Question

White space under image/container...due to class or image dimensions?

I'm developing a website and ran into an issue Here

The service image all have a small amount of white space between them and the bottom of the container. I've searched SO and have seen similar issues (but it wasn't apparent they were using bootstrap or some responsive framework) and have also used firebug to figure out what is causing the issue (and have tried implementing the suggestions found on the other posts)...

I'm not sure if the issue is a class (firebug says no), or if it's just the combination of the ".img-responsive" class and the dimensions of the image.

If anyone could take a look and lend some insight to this it would be extremely helpful and greatly appreciated. Thanks!

The HTML where the issue is found is below:



.service-img-bg {
padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 service-img-bg pull-right">
<figure class="imghvr-slide-left">
<img class="img-responsive service-main-img hidden-md" src="media/services-icons/offered-service-img.png" alt="Hologlass">
<img class="img-responsive service-main-img visible-md" src="media/services-icons/offered-service-img-sm.png" alt="Hologlass">
<figcaption>
<a class="video-image playVideo" href="https://www.youtube.com/embed/Q4QI3VyC5p4?rel=0&amp;showinfo=0" data-toggle="lightbox" data-title="3D Mapping Demonstration">
<i class="fa fa-search overlay-icon"></i>
</a>
</figcaption>
</figure>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 wow slideInLeft pull-left service-text-bg-img">
<div class="col-md-12 service-text-container">
<h5 style="padding:0 0 15px;">HOLOGRAPHIC</h5>
<p>Our method of applying specialized light absorbing film-- and in some high-ambient lighting situations, low voltage autodimming electrochromic film-- to a transparent substrate of glass, acrylic or polycarbonate transforms these common surfaces into
a display that truly commands stopping power. We’ve developed a solution that is a head turning alternative to traditional digital signage that is suitable for storefronts, wayfinding and interactive multi-touch or touchless concepts.
<br>
<br>Our lineup offers a full range of rear, front &amp; dual projection applications. Both rigid and film based surfaces custom built to spec, with additional iturnkey installation services your project which include specialty mounting, adhesions and
even massive ‘Holoboard’ structures up to 40 feet wide.</p>
<div class="page-scroll">
<a href="#footerBlock" class="inquire-link">
<button class="inquire-btn">INQUIRE NOW</button>
</a>
</div>
</div>
</div>




Answer

[class^="imghvr-"], [class*=" imghvr-"] make this class's property display: block, instead of display: inline-block

See here it solved http://prntscr.com/d57tkc

Comments