Blog Review card using HTML/CSS

Community feedback

• 

  MikDra1•6,980

  @MikDra1Posted 2 months ago

  I encourage you to use this technique to make the card responsive with ease:

  .card {
  width: 90%;
  max-width: 37.5rem;
  }
  

  On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.

  Also to put the card in the center I advise you to use this code snippet:

  .container {
  display: grid;
  place-items: center;
  }
  

  Hope you found this comment helpful 💗💗💗

  Good job and keep going 😁😊😉

  Marked as helpful

  1

  ---

  

  mohamedballa•80

  @mohamedballaPosted 2 months ago

  @MikDra1 Thank you very much This is actually very helpful I have been using media queries for different size screen and margin auto for center

  0
• 

  Hieu Tran•60

  @hieutran249Posted 2 months ago

  I think this solution is great. I recommend that the sizes of some components such as the user avatar should be a little bit smaller. Overall, this solution is nice.

  Marked as helpful

  1

  ---

  

  mohamedballa•80

  @mohamedballaPosted 2 months ago

  @hieutran249 yes it need a little improvement Thank you for the suggestions.

  0
• 

  Mary Ronan•40

  @MazontheMoonPosted 2 months ago

  Well Done 👏

  Your code is clean and easy to follow.

  I will give one suggestion for your next challenge(s) to help with the layout shift "our" card has from the sample card( where the attribution text is not part of the main example image so they don't match up well when you do the comparison) so if you set the position to fixed for the attribution text instead of having it the normal layout flow then your blog card should be more in line with the sample blog card :)

  Happy coding!

  Marked as helpful

  0