Blog preview card with some tweaks

Community feedback

• 

  P

  Bamo-D-Abdallah•300

  @Bamo-D-AbdallahPosted 4 months ago

  Doesn't look too wide to me, you shouldn't aim for 100% match.

  But I strongly advice avoid using id as CSS selector, the only time I use ID is when I target the element in JS, never in CSS, use class selectors intead.

  Marked as helpful

  1
• 

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  Hi @Saoud2021,

  Congratulations on successfully completing the challenge! Your code is well-structured, and the website works perfectly across different screens.

  I have a suggestion regarding your code that I believe will be of great interest to you.

  As you mentioned, your card looks wider. This is because of the width you have given to the .container. Change that width to max-width: 384px;:

  .container {
      max-width: 384px;
  }
  

  Also, add some padding to the body so that there will be a gap between the card and the small screen edges:

  body {
      padding: 10px;
  }
  

  I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

  Feel free to reach out if you have more questions or need further assistance.

  Happy coding!

  Marked as helpful

  1
• 

  Ham•340

  @hmac100Posted 4 months ago

  Hi Abdullah Looks pretty good to me - I reckon the max-width suggestion from Krushna is a really good idea I noticed the avatar and author name are a bit out of alignment . For what it's worth - I wrapped both in a container - that seemed to do the trick.

   <div class="author">
   src="./assets/images/image-avatar.webp" alt="avatar of james hooper"/>
  <div class="author-name">Greg Hooper</div>
  </div> 
  

  Then used display:flex and align-items:center on the .author class

  Well done 👍

  0

  ---

  

  Abdallah Aboelsaoud•220

  @Saoud2021Posted 4 months ago

  thank you for letting me know , i have found the problem to be in the margin-bottom , but i changed the code a little bit to make it more specific thanks@hmac100

  0
• 

  Tmg•20

  @t3m4gPosted 4 months ago

  For the profil use "align-center" to get a better result

  0