Blog Preview Card

Community feedback

• 

  raya•2,870

  @rayaattaPosted 10 months ago

  Hello 👋, congratulations on completing this challenge 🎉

  I have some suggestions to make your code much more responsive.

  1 You used width: 380px; On the .container This is okay but in case a screen is less than 380px wide then the card overflows the view port. You can make it more responsive by using max-width:min(90%,380px) This means it is 380px but on smaller screens it only covers 90% of the width.

  After making this adjustment your image will overflow because you set it to a fixed width of 370px. It is a bad practice to set a fixed height or width of an image. The most recommended practice is giving it a max-width.Usually

  img {
  display:block;
  max-width:100%;
  }
  

  This would be a more responsive approach

  2 In order to center the card on any screen add this code snippet to body.

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

  Then remove the margin properties from .container

  I hope this helps 🙃

  Otherwise your solution is neat👍

  Happy coding ✌️

  Marked as helpful

  1

  ---

  

  RassTa-00•50

  @RassTa-00Posted 10 months ago

  @rayaatta thank you very, very much. i just learned a couple of new things from you ⭐

  0

  

  raya•2,870

  @rayaattaPosted 10 months ago

  I'm glad I assisted@RassTa-00

  0