I seem to be encountering a problem with the bootstrap thumbnail and horizontal scrollbar in Internet Explorer and Firefox, but strangely enough, not in Chrome or mobile browsers.
Specifically, when using Firefox and IE, the modals appear distorted with a horizontal scroll bar, whereas this issue is non-existent in Chrome or mobile browsers. As shown in the image below, this is the problem:
https://i.sstatic.net/qdJ8O.png
This is how the modals look in Firefox: https://i.sstatic.net/UHl9E.png and this is how they should display without any issues as seen in Chrome: https://i.sstatic.net/0uFYJ.png
Here is the modal code:
<div class="container" id="portfolio">
<hr>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="Text 101 WebBuild V1/Text 101 WebBuild V1.html" target="_blank"> <img src="images/text101.png" alt="..." class="image">
<div class="imgDescription">
<h3 class="img-content"><strong>Text 101</strong></h3>
<span class="modal-button" >
<img src="images/unity1.png" style="height:30px; width:30px;" > </span>
</div>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="landingPage.html" target="_blank"> <img src="images/myweb-app.png" alt="..." class="image">
<div class="imgDescription">
<h3 class="img-content" style="left:95px;"><strong>MyWebsite App</strong></h3>
<span class="modal-button" style="left:145px">
<img src="images/webdev.png" style="height:30px; width:auto;" > </span>
</div>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="#"> <img src="images/card3.jpg" alt="..." class="image">
<div class="imgDescription">
<h3 class="img-content"></h3>
<span class="modal-button"></span>
</div>
</a>
</div>
</div>
</div> <!-- portfolio end here -->
Additionally, here is the CSS being used:
.thumbnail {
position: relative;
display: inline-block;
}
.thumbnail .imgDescription {
position: absolute;
top: 4px;
left: 4px;
width: 98%;
height: 96%;
display: none;
color: #FFF;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
.thumbnail:hover .imgDescription {
display: block;
background: rgba(0, 0, 0, .6);
}
.thumbnail .imgDescription .img-content {
position: absolute;
top: 25%;
left:35%;
color:white;
}
.thumbnail .imgDescription .modal-button {
position: absolute;
top: 55%;
left:43%;
}
Despite my efforts, I've been unable to pinpoint where the issue lies. It's perplexing that everything works fine in Chrome and mobile browsers, so any assistance would be greatly appreciated.