I'm using bootstrap to create a grid of cards, but all the cards are merging together when resizing the screen. This mainly happened when i tried to layout the icons to appear at the top left of the card and the bottom middle whilst adding a a href tag to the image.
<div class="col-sm-6 col-md mt-3"><div class="card" style="position: relative;"><a href="#" style="position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none;"><img src="https://images.igdb.com/igdb/image/upload/t_cover_big/co7lbb.png" alt="" style="pointer-events: auto;"></a><div class="icon-placeholder" style="position: absolute; top: 0; left: 0; z-index: 3;"><!-- Heart icon on top left --><i id="heart" class="fas fa-heart heart-icon top-left-icon"></i><!-- Other icons on bottom --><div class="bottom-icons" style="position: absolute; bottom: -300px; left:100px;"><i class="fas fa-comment comment-icon p-2"></i><i class="fas fa-share share-icon p-2"></i><!-- ... add more icons as needed --></div></div></div>---- CSS stylesheet ----
display: flex; justify-content: space-evenly; margin-top: auto; /* Push the bottom icons to the bottom */} .icon-placeholder { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 10px; box-sizing: border-box;}.card img { border-radius: 20px; max-height: 320px; max-width: 320px; object-fit: cover; display: block;} .card { position: relative; border-radius: 20px; background-color: #ffffff00; max-width: 264px; max-height: 352px; transition: transform .2s; /* Add transition property for smooth animation */ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);}