Having an issue with CSS Grid not working properly on actual mobile device. The code works perfectly when testing within Chrome/Firefox dev tools

Question

EDIT: Guys, I figured it out. As the comments have suggested that I try debugging using Safari, which I hadn't done, I found that for whatever reason in my live code my.gallery-grid class in CSS had a "height: 100%" that was throwing things off for whatever reason. So I erased that and changed my.card to have a height of auto instead of leaving the "max-height: 100%". That seemed to work perfectly and is now working within Safari iOS, Chrome, and Firefox. Thank you Ben Souchet for the suggestion!

I recently finished creating an image gallery that uses CSS Grid and works perfectly fine when I use the dev tools on Firefox and within Chrome. It's only when I test the site on my actual phone (iPhone) when the gallery seems to crash. Works great on desktop.

Here's what it looks like on actual mobile

Here's what it's supposed to look like and how it looks when viewed through chrome/firefox dev tools

My HTML code:

            <div id="trigger-view-button" class="gallery-grid">
                <div class="card">
                    <img src="css/images/gallery/gallery-img1.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img2.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img3.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img4.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img5.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img6.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img7.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img8.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img9.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img10.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img11.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img12.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img13.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img14.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img15.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img16.jpg" alt="">
                </div>
            </div>

My CSS code:

/*------- Gallery Photos -------*/

.gallery-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-auto-rows: auto;
    padding: 0 1.5em;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #353535;
    font-size: 3rem;
    color: #fff;
    box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
    max-height: 100%;
    width: 100%;
    border-radius: 4px;
    transition: all 500ms, opacity 1200ms;
    overflow: hidden;

    object-fit: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card:hover {
    box-shadow: rgba(2, 8, 20, 0.1) 0px 0.35em 1.175em, rgba(2, 8, 20, 0.08) 0px 0.175em 0.5em;
    transform: translateY(-3px) scale(1.1);
}

.card-hidden {
    height: 0;
    visibility: hidden;
    opacity: 0;
}

.card-fade-in {
    height: auto;
    visibility: visible;
    opacity: 1;
}

My JS code (this allows the user to load about 8 more pictures onto the grid after clicking on a load more button. This explains why there's a card-hidden/card-fade-in class):

$("#loadMore").click(function () {
    $(".card-hidden").toggleClass("card-hidden card card-fade-in");
    $("#loadMore").fadeOut("slow");
});

I've been looking around for a solution but it seems to be really tricky to find something when the dev tools show the grid working great while actual mobile does not. I have also checked for compatibility and safari seems to be compatible with the grid settings I'm using.

Any suggestions would be great. Thanks in advance.

Answer 1

I placed an edit on the question but I'll place the answer here too in order to "solve" the question.

I figured out the issue. As the comments have suggested, I tried debugging using Safari, which I hadn't done, and I found that for whatever reason in my live code my.gallery-grid class in CSS had a "height: 100%" that was throwing things off for whatever reason. So I erased that and changed my.card to have a height of auto instead of leaving the "max-height: 100%". That seemed to work perfectly and is now working within Safari iOS, Chrome, and Firefox. Thank you Ben Souchet for the suggestion!