Kevin Powell - Community•2mo ago

Can't make image and card have equal height

this is what my current design looks like and i want to the rights images to be equal in height with themself and in equal height with the cards on the left i am currently using bootstraps grid system and mainly its own classes but i did try it using CSS grid but wasn't able to have equal height, so what will be the solution here?

13 Replies

Dark-M9EEROP•2mo ago

<div class="row mx-auto px-lg-4 px-2 mt-4">
    <div class="col-lg-6 col-md-12 row mx-auto">
        <!-- Cards are in here -->
    </div>
    <div class="col-lg-6 col-md-12 row mx-auto">
        <div class="col-lg-6 col-md-12 p-0 pe-2">
            <a href="#" class="position-relative d-block mb-3">
                <span class="position-absolute text-white cusRespMidBannerTxt" style="bottom:5%;left:5%;">Sleepwear</span>
                <img src="https://dummyimage.com/1828x2696/000/fff" alt="sleepwear_banner" class="img-fluid rounded-4">
            </a>
        </div>
        <div class="col-lg-6 col-md-12 p-0 ps-2">
            <a href="#" class="position-relative d-block mb-3">
                <span class="position-absolute text-white cusRespMidBannerTxt" style="top:35%;left:25px;">Caps</span>
                <img src="https://dummyimage.com/1850x1166/000/fff" alt="caps_banner" class="img-fluid rounded-4">
            </a>
            <div class="row mx-auto">
                <div class="col-lg-6 col-md-12 p-0 pe-2">
                    <a href="#" class="position-relative d-block mb-3">
                        <span class="position-absolute text-white cusRespMidBannerTxt" style="bottom:5%;right:25px;">Bags</span>
                        <img src="https://dummyimage.com/915x1634/000/fff" alt="bags_banner" class="img-fluid rounded-4">
                    </a>
                </div>
                <div class="col-lg-6 col-md-12 p-0 ps-2">
                    <a href="#" class="position-relative d-block mb-3">
                        <span class="position-absolute text-white cusRespMidBannerTxt" style="bottom:5%;right:25px;">Health & Beauty</span>
                        <img src="https://dummyimage.com/873x1632/000/fff" alt="health_beauty_banner" class="img-fluid rounded-4">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mx-auto px-lg-4 px-2 mt-4">
    <div class="col-lg-6 col-md-12 row mx-auto">
        <!-- Cards are in here -->
    </div>
    <div class="col-lg-6 col-md-12 row mx-auto">
        <div class="col-lg-6 col-md-12 p-0 pe-2">
            <a href="#" class="position-relative d-block mb-3">
                <span class="position-absolute text-white cusRespMidBannerTxt" style="bottom:5%;left:5%;">Sleepwear</span>
                <img src="https://dummyimage.com/1828x2696/000/fff" alt="sleepwear_banner" class="img-fluid rounded-4">
            </a>
        </div>
        <div class="col-lg-6 col-md-12 p-0 ps-2">
            <a href="#" class="position-relative d-block mb-3">
                <span class="position-absolute text-white cusRespMidBannerTxt" style="top:35%;left:25px;">Caps</span>
                <img src="https://dummyimage.com/1850x1166/000/fff" alt="caps_banner" class="img-fluid rounded-4">
            </a>
            <div class="row mx-auto">
                <div class="col-lg-6 col-md-12 p-0 pe-2">
                    <a href="#" class="position-relative d-block mb-3">
                        <span class="position-absolute text-white cusRespMidBannerTxt" style="bottom:5%;right:25px;">Bags</span>
                        <img src="https://dummyimage.com/915x1634/000/fff" alt="bags_banner" class="img-fluid rounded-4">
                    </a>
                </div>
                <div class="col-lg-6 col-md-12 p-0 ps-2">
                    <a href="#" class="position-relative d-block mb-3">
                        <span class="position-absolute text-white cusRespMidBannerTxt" style="bottom:5%;right:25px;">Health & Beauty</span>
                        <img src="https://dummyimage.com/873x1632/000/fff" alt="health_beauty_banner" class="img-fluid rounded-4">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

.cusRespMidBannerTxt{font-size:2.5vw;}
@media only screen and (max-width: 999px) {
    .cusRespMidBannerTxt{font-size:3.5vw;}
}
@media only screen and (max-width: 768px) {
    .cusRespMidBannerTxt{font-size:5vw;}
}
@media only screen and (max-width: 550px) {
    .cusRespMidBannerTxt{font-size:6vw;}
}

.cusRespMidBannerTxt{font-size:2.5vw;}
@media only screen and (max-width: 999px) {
    .cusRespMidBannerTxt{font-size:3.5vw;}
}
@media only screen and (max-width: 768px) {
    .cusRespMidBannerTxt{font-size:5vw;}
}
@media only screen and (max-width: 550px) {
    .cusRespMidBannerTxt{font-size:6vw;}
}

Mannix•2mo ago

one way would be give the a and img for sleapwaer bags and health a class of h-100 https://codepen.io/MannixMD/pen/NWQxRgW or remove d-block from the a there instead of adding h-100 https://codepen.io/MannixMD/pen/RwXrGLE

Dark-M9EEROP•2mo ago

with no d-block