The curios case of unequal media cards
Tags: help, html, css
Published: 2020-08-10 14:51:37

---
title: The curios case of unequal media cards
published: true
description: Why do the media cards have varying heights?
tags: help, html, css
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/tu0wvvyefnr8qnx35ffl.png
---

Recently, I was working on a little project and I ran into an issue that took  me hours to figure out. The issue is the image used as the cover image for this article where the media cards have __unequal heights__ due to varying content.

At first, I taught it was a code in the CSS that was causing the issue, the first debugging approach I took was to comment all CSS code except the ones responsible for styling the media cards but still the issue persisted, there was no JavaScript on the Web page, therefore, I turned to the HTML.

I began with the same approach of commenting out some HTML code and then out of nowhere, the heights of the media cards became equal, __the CSS was not the issue it was the HTML__.

The question is: __Why is a piece of HTML causing the media cards to have varying heights__?

I looked around and still could not find an answer, then __I decided to ask the DEV community__.

Here is the HTML and CSS code to reproduce the issue.

## The HTML

```html
<main>
    <div class="row">
        <section>
            <div class="media-card">
				<img
					class="media-card__image"
					src="path-to-image"
					alt="An image of a fictional site named Bukateria"
					width="300"
					height="200"
				/>
                <div class="media-card__content">
					<h2 class="media-card__title">Bukateria</h2>
					<p class="media-card__body">
                        The site is fiction. You can <a href="#">check it online</a>
						and view the <a href="#">code on GitHub</a>.
                    </p>
                </div>
            </div>
		</section>

		<section>
			<div class="media-card">
				<img
					class="media-card__image"
					src="path-to-image"
					alt="An image of a fictional design studio named Alice and bob"
					width="300"
					height="200"
				/>
				<div class="media-card__content">
					<h2 class="media-card__title">Alice & Bob</h2>
					<p class="media-card__body">
                        A fictional Web design studio created as the
                        <a href="#"> final project</a> for a
                        <a href="#">series of articles on Web development</a>.
                    </p>
                    
                    <p class="media-card__body">
                        <a href="#">
                            Check it online</a> and view the
                        <a href="#" >code on GitHub</a>.
                    </p>
                </div>
            </div>
        </section>
    </div>
</main>
```

## The CSS

```css
/**
 * Download the Catamaran font on Google fonts or swap it
 * with your desired font.
 */

body {
	background-color: #bbb;
}

main {
	width: 70%;
	margin: 0 auto;
}

.media-card {
	background-color: #fff;
	border: 1px solid hsl(0, 0%, 85%);
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	overflow: hidden;
	max-width: 18.75em;
	margin: 2em auto;
}

@media screen and (min-width: 48em) {
	.row {
		display: flex;
		justify-content: space-around;
	}
}

.media-card__image {
	display: block;
	width: 100%;
	object-fit: cover;
}

.media-card__content {
	padding: 1rem;
}

.media-card__title {
	font-size: 1.25rem;
	color: rgba(0,0,0,0.8);
	font-family: "Catamaran-Bold";
}

.media-card__body {
	font-size: 1rem;
	color: rgba(0,0,0,0.75);
	line-height: 1.5;
	font-family: "Catamaran-Medium";
}
```

I intentionally did not mention the piece of HTML  that I commented out for the following reasons:

* You might comment (or delete) another HTML code other than the one I commented out  and still solve the issue.
* You can tell me why the commented or deleted HTML is causing the issue.
* You might be able to solve it with CSS.

Thanks in advance.