Blog preview card

Community feedback

• 

  Aakash Verma•9,520

  @skyv26Posted about 2 months ago

  Hi @basSluiter,

  Here are a few suggestions to improve your code:

  1. Use div instead of article tag: Since this is a card layout project, article isn't the most appropriate tag. A simple div will be more suitable for the structure.

  <div class="article-container">
    <img src="./assets/images/illustration-article.svg" alt="">
    <div>learning</div>
    <p>Published 20 Jan 2025</p>
    <h2 class="active">HTML & CSS foundations</h2>
    <p>These languages are the backbone of every website, defining structure, content, and presentation.</p>
    <div class="publisher">
      <img src="./assets/images/image-avatar.webp" alt="">
      <h3>Greg Hooper</h3>
    </div>
  </div>
  

  2. Remove the min-width restriction: You already have a max-width set, so the min-width isn't necessary. This will make the card layout more fluid across screen sizes.

  .article-container {
    display: flex;
    flex-direction: column;
    height: fit-content;
    justify-content: center;
    max-width: 25rem;
    /* Remove min-width */
    border: solid 2px;
    box-shadow: 10px 10px;
    border-radius: var(--border-radius);
    background-color: var(--clr-sec);
    padding: 1.5rem;
    margin: 2rem 3rem; /* Shorthand margin */
  }
  

  3. Remove the unnecessary media query: Since you're handling responsiveness through max-width, there's no need for the media query anymore. Removing it will simplify the code.

  /* Remove the media query */
  @media screen and (width > 375px) {
    .article-container {
      /* max-width: 25rem; */
    }
  }
  

  4. Shorthand for margins: Instead of writing multiple margin properties, you can use shorthand for the margin property:

  margin: 2rem 2rem 3rem;
  

  5. Add width 100% to the image: To ensure the image is responsive, add width: 100% to make it scale with the parent container.

  img {
    width: 100%;
  }
  

  Hope this helps! Let me know if you need further clarification. 😊

  0