Blog card review page

Community feedback

• 

  Jessica•70

  @JesNetWD

  Posted 3 months ago

  You set align-items and justify-content property in the body when you did not set display to flex. It won't center properly that way, which is why you then needed to add padding: 40px 20px; and margin: 0 auto; to center it. Set display to flex, then remove the padding property. Set margin to 0.

  body{
    margin: 0;
    background-color: rgb(244, 208, 78);
    max-width: 1440px;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  

  The same goes for the .container rule. Set display to flex, remove the margin and give it a uniform padding all around. You do not need to set align-items.

  .container{
    padding: 20px;
    justify-content: center;
    background-color: white;
    height: 550px;
    width: 400px;
    border-radius: 16px;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 1);
    border-color: black;
    border-style: solid;
    border-width: 1px;
  }
  

  00
• 

  Gerónimo Rivoira•60

  @gerivo

  Posted 3 months ago

  Solution is very good and it follows the proposed design.

  You can center the container by doing something like:

  .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50); }

  Some things I noticed:

  • The title should turn yellow on hover (I also missed that on my solution lol)
  • The author footer should be a little bit closer to the bottom of the container
  • It seems to me that the "Published..." should be a little bit smaller

  00