Blog preview card

Community feedback

• 

  Aakash Verma•9,520

  @skyv26Posted 2 months ago

  Hi @Arekpok29,

  Here are some suggestions for your code to improve it:

  1. Remove commented code: There’s some commented-out code in your repo (lines 19-32 in index.html) that should be removed for cleaner and more maintainable code. You can check it here: GitHub link. ✅

  2. Use place-content instead of place-items: place-content will help you position the card in the center. Both properties have different use cases, so using place-content in this case is more appropriate for centering. 🎯

     Example:

     body {
         font-family: "Figtree", serif;
         background-color: hsl(47, 88%, 63%);
         height: 100svh;
         display: grid;
         place-content: center;
     }
     

  3. Use max-width instead of width for responsiveness: When defining the card's size, max-width ensures that it adapts to different screen sizes, while width would keep it fixed. 📱

     Example:

     .card {
         background-color: white;
         border-radius: 1rem;
         max-width: 22rem;  /* Instead of width */
         box-shadow: 0.5rem 0.5rem 0 black;
         border: 1px solid black;
     }
     

  4. Make image width 100%: To ensure the image adapts properly to the card's size, simply set its width to 100%. 🎨

     Example:

     .card .top-image {
         display: flex;
         justify-self: center;
         max-width: 100%;
         margin: 1rem;
         border-radius: 1rem;
     }
     

  5. Consolidate margins and paddings: Instead of adding margin to the text inside the card, just add padding to the card itself. This keeps your layout clean and consistent. 💡

     Example:

     .card {
         padding: 1rem;  /* Add padding here */
     }
     
     .card .card-content {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         gap: 0.5rem;
     }
     

  These small adjustments will improve the readability, maintainability, and responsiveness of your code. Keep up the good work! 👍

  Let me know if you have any questions. 😊

  Marked as helpful

  1

  ---

  

  Arekpok29•50

  @Arekpok29Posted 2 months ago

  Very helpful feedback. Thank you

  1
• 

  coyoteshkw•150

  @coyoteshkwPosted 2 months ago

  no responsive on 375px, and not so pixel perfect.

  published time is not that bold

  I usually use some div wrapper on img or tag, maybe use them can control element better.

  Actually it feels good, bro

  1