Created a responsive blog preview page with html and css

Community feedback

• 

  Marcos Travaglini•6,210

  @Blackpachamame

  Posted over 1 year ago

  Greetings! you have done a great job 😎

  📌 Some suggestions

  • The justify-content: center and align-items: center properties in the body do not work if they do not have a display: flex or display: grid
  • Apply max-width: 100% to your img so that it occupies the correct width within the container
  • This grid-template-rows: repeat(2, auto) does nothing
  • You can replace the width of main with 20rem instead of 30rem
  • You can use the gap property in the body to separate your main from your footer. Don't use br for this
  • Instead of using margin to center your content in the center of the screen, you can use the flexbox properties in the body:

  body {
  background: hsl(47, 88%, 63%);
        box-sizing: border-box;
        padding: 0;
        font-size: 16px;
        font-family: Arial, Helvetica, sans-serif;
        color: hsl(0, 0%, 50%);
        margin: 0;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px; /* Separate the main from the footer */
  }
  

  01

  Marked as helpful