Dark-M9EER Comments - Answer Overflow

.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;}
}

17 replies

KPCKevin Powell - Community

•Created by Dark-M9EER on 10/1/2024 in #front-end

Can't make image and card have equal height

<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>

17 replies

KPCKevin Powell - Community

•Created by Dark-M9EER on 9/26/2024 in #front-end

Responsive pinterest like gallery

Thanks for the help really appreciate it, its working perfectly now.

10 replies

KPCKevin Powell - Community

•Created by Dark-M9EER on 9/26/2024 in #front-end

Responsive pinterest like gallery

just one thing if i make it a href tag will that effect the layout by any means?

10 replies

KPCKevin Powell - Community

•Created by Dark-M9EER on 9/26/2024 in #front-end

Responsive pinterest like gallery

well thanks for the help I will give this a try and will let you know

10 replies

KPCKevin Powell - Community

•Created by Dark-M9EER on 9/26/2024 in #front-end

Responsive pinterest like gallery

can you show a little demo of some kind so i can get idea of how its working and if i make two separate workings for desktop and mobile will this then be possible?

10 replies

Gaming

Programming