responsive grid box using css

Community feedback

• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @Quantom223,

  Good job on your first attempt

  To center the card in the middle of the page you can make the following changes to you body rule in the media query.

  @media screen and (min-width: 601px) {
  body {
      width: 600px;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  }
  

  and the button is missing padding on mobile because you're only adding the padding in the min-width:601px media. you can add the padding padding: 0.8rem; on the .addToCart class outside the media query and both mobile and desktop will have padding.

  Hope this is helpful.

  Marked as helpful

  0
• 

  Quantom•30

  @Quantom223Posted about 2 years ago

  Thank you sir, it was helpful. the card centered to the middle, And the button are fixed too

  0