Responsive Blog preview card using HTML & CSS

Community feedback

• 

  P

  josip-h•90

  @josip-hPosted 5 months ago

  Hi Jude!

  Congratulations on solving the challenge. I like how clean and easy to understand your code is. It's close to being pixel-perfect. I think that there are two ways in which your code differs from the one specified by the style guide.

  1. You used the font-weight property of 900 for the .card-content__category class and the .card-content__title class. In the style guide document, I see only two font weights specified, 500 and 800.
  2. Also in the style guide, there is this sentence: "Ensure content is responsive and meets WCAG requirements by testing the full range of screen sizes from 320px to larger screens.". On screen sizes that are less than 352px wide, your card gets a bit hidden.

  To fix that I would do the following:

  • In the .card class:

    • change the height property to .min-height with the value of 501px.
    • add 10px margin-left and 20px margin-right

  • Changes in the .card-illustration class:

    • change the width property to a max-width property of 327px

  I tested your solution with these changes and it seems to me that then everything is within style-guide specifications.

  Also, I would like to say how nice your solution for exactly separating the card elements by 24px by using the space-evenly value for the justify-content property. I didn't see that, and I specified margin values for each element in my solution... By reading through your solution I found many ways in which I could improve on my solution.

  Thanks for sharing.

  Marked as helpful

  0

  ---

  

  Jude Nwafor•110

  @MistahJudePosted 3 months ago

  @josip-h thanks a lot for the feedback, I’ll do the necessary adjustments, I really appreciate

  0