Design a Blog Post Card - Design a Blog Post Card

HTML-CSS
1

Tell us what’s happening:

My .post-img element is filling the card’s width and i have a border-bottom value but it’s telling me both are not.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Post Card</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>
            Welcome to my blog post card
        </h1>
    </header>
    <main>
    <div class="blog-post-card">
    <img class="post-img" src="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg"
    alt="A person operating a computer">
    <div class="post-content">
        <h2 class="post-title">
          Learn cybersecurity in 2025
        </h2>
        <p class="post-excerpt">
            Cybersecurity is an indemand skill right now, there's no better time to get into it.
        </p>
        <a class="read-more" href="#">Read More</a>
    </div>
    </div>
    </main>
</body>
</html>

/* file: styles.css */
*{
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
header{
        width: 80%;
        margin: 20px auto;
        padding: 20px;
        background-color: lightgray;
}
h1{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-size: 40px;
}

.blog-post-card{
        background-color: white;
        border: 1px solid black;
        border-radius: 5px;
        width: 90%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
}

.post-img{
        display: block;
        width: 100%;
        border-bottom: 5px solid grey;
 border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.post-content{
          margin: 20px;
          padding: 20px;
}
.post-title, .post-excerpt{
          font-weight: bolder;
          margin: 20px 10px;
          font-size: 25px;
          line-height: 1.5;
}

.post-title{
color: crimson;
}

.post-excerpt{
        color: blue;
}
.read-more{
          display: inline-block;
          width: 30%;
          max-width: 200px;
          margin: 5px;
          padding: 10px;
          color: black;
          background-color: chocolate;
          border: 2px solid black;
          border-radius: 5px;
          text-decoration: none;
          text-align: center;
         }

.read-more:hover{
          background-color: burlywood;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0

Challenge Information:

Design a Blog Post Card - Design a Blog Post Card

2

Hi there. Give the view port width to the .post-image instead of percentage.

3

It is the border on .blog-post-card combined with box-sizing: border-box that is making the width test fail. It is expecting the parent element width and image width, to exactly match.

I guess you have a few options:

  1. Remove box-sizing: border-box, but that seems like a bad solution.

  2. Remove the border from the parent .blog-post-card element.

  3. Use a calc function and add the 2px border size (left+right) to the image size. This could be an acceptable solution, but rounding makes it an odd number (not sure where the imprecision is).

width: calc(100% + 1.82px);

The test might have to use something other than strictEqual to allow for a little leeway.

4

can you open an issue about it? closeTo or approximately could be used

5

I opened an issue for it.