Blog Preview Card | Flexbox

Community feedback

• 

  Ryan Hardy•110

  @ryyHardyPosted 6 months ago

  I really like the way you wrote your CSS. I can tell you have a good foundation for this stuff. As for what you mentioned:

  • I feel like it's usually better to use Google Fonts, but this article has a pretty good summary of your options for loading fonts.
  • I don't mind the CSS nesting, but you can do the same thing using a descendant selector or something similar. Try looking at a reference of CSS selectors to see if there are alternatives to nesting because it isn't that widely used yet.
  • I think the image is good. All I noticed was that the padding on the card as a whole looks a little large.
  • As an alternative to media queries, I would try to mess around with the clamp() function. It's really good in some cases. I don't know for sure, though.

  That's all I have to say. Everything else is really good.

  Marked as helpful

  1

  ---

  

  Shivian•40

  @Andre-DMPosted 6 months ago

  @ryyHardy Hi there, firstly, thank you for taking the time to leave me feedback! I took a quick look at the article you linked and, as soon as I have time, I will definitely read it carefully since it seems very useful. Same with clamp(), I will definitely do some research on it. Thanks again for the tips!

  0
• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 6 months ago

  Hello there!

  Congrats on completing the challenge! ✅

  Your project is looking fantastic!

  I'd like to suggest a way to make it even better:

  • Using margin isn't always the most effective method for centering an element.

  Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

  📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

  body {
      min-height: 100vh;
      display: flex; 
      justify-content: center;
      align-items: center;
  }
  

  I hope you find this helpful!

  Keep up the excellent work!

  Marked as helpful

  1

  ---

  

  Shivian•40

  @Andre-DMPosted 6 months ago

  @danielmrz-dev Hi, thank you very much for the advice, as soon as I can I will modify the code with the one you proposed! If I may ask, why do you set min-height: 100vh?

  0
• 

  neven.cebic•510

  @redizorkPosted 6 months ago

  Look at my solution :)

  0