Working on a project locally, I noticed different styling on one element between two repositories. Despite the HTML, CSS, and JS files being identical according to WinMerge, there's an inconsistency with the bootstrap class card-img-overlay. The issue can be seen in the following examples:
Expected behavior: https://i.sstatic.net/9UMzs.jpg
Current behavior: https://i.sstatic.net/y45un.jpg
The styles applied by Chrome for card-img-overlay differ between the two repos, causing discrepancies. Even after confirming that both projects use the same version of Bootstrap (4.3.1), the issue persists across different browsers. Manually copying over the correct files did not resolve the styling differences.
The affected element snippet is as follows:
<div class="image-block card border-0" onclick="getProjectSTAAR()">
<img src="assets/img/spotlight-page/STAARspotlight-graphic-03.jpg" class="card-img spotlight-img-group" alt="" />
<div class="card-img-overlay d-flex align-items-end justify-content-center">
<p class="overlay-background text-center fnt-goth-med">
TEST NAME
</p>
</div>
</div>
These cards are part of a group within a carousel item, each sharing common dimensions. The custom CSS applicable to this element includes:
.image-block {
max-height: 11.625rem;
text-align: center;
cursor: pointer;
}
.spotlight-img-group {
position: relative;
float: left;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
min-height: 10em;
min-width: 10em;
}
.overlay-background {
font-size: 0.75em;
position: relative;
top: 20%;
background: white;
margin-bottom: 0;
width: 100%;
height: 40%;
}
The expected overlay should be a rectangular white box with centered text at the bottom of the card. However, the incorrect version renders the overlay invisible altogether.