0

I have this issue where my image doesn't display the same in Chrome (top photo) as it does in Firefox (bottom photo). I've tried changing a bunch of properties and even putting the image inside a div but nothing seems to change the layout of the card in Chrome.

What is causing this behaviour?

HTML

<main>
    <section class="card-container">
        <div class="card">
            <img class="card__img" src="https://picsum.photos/1180/1180?random=1">
            <div class="card__content">
                <span class="card__category"><a href="">Technology</a></span>
                <h3 class="card__title">Why AI will destroy humankind</h3>
                <p class="card__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore deserunt, aut
                    quas obcaecati exercitationem laborum cum, sint atque excepturi cupiditate voluptates ipsum maxime
                    eaque ipsa, ex fugiat quod? Quasi, suscipit!</p>
                <span class="card__author">
                    Written by <a href="#" class="card__author">Elon Musk</a> on 14 Jun 2021
                </span>
            </div>
        </div>
    </section>
</main>

SASS

.card-container {
    min-height: 500px;
    max-width: 900px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
}

.card {
    display: inline-flex;
    flex-direction: row;
    justify-content: center; 
    align-items: center;
    max-height: 300px;
    
    background-color: white;
    border-radius: 3px;
    box-shadow: $shadow-light;
    overflow: hidden;
    transition: display 500ms linear;

    .card__img {
        flex: 1 100%;
        width: 100%;
        min-height: 300px;
        object-fit: cover;
    }

    .card__content {
        flex: 1 100%;
        display: flex;
        flex-direction: column;
        padding: 20px;
        width: 100%;
        height: 100%;
    }

    .card__category {
        margin-bottom: 0.5rem;
    }

    a {
        color: $accent1;
        border-bottom: 1px solid transparent;
        transition: 250ms ease;
    }

    a:hover {
        color: $accent1-darker;
        border-bottom: 1px solid $accent1;
    }

    h3 {
        font-size: 1.5rem;
        text-transform: capitalize;
        margin-bottom: 15px;
    }

    .card__text {
        margin-bottom: 15px;
    }

    .card__author {
        justify-self: flex-end;
    }
}

Chrome Firefox

link to my codepen

Francois Paulsen
  • 135
  • 1
  • 10
  • Could you make your code into a snippet we can run? Include an image which shows the problem. See https://stackoverflow.com/help/minimal-reproducible-example My guess is the priority given to min-height. – A Haworth Feb 12 '22 at 08:03
  • I added a link to my codepen in the original post at the bottom. It seems to have the same behaviour as Chrome does – Francois Paulsen Feb 12 '22 at 09:55

0 Answers0