Responsive profile card component main using CSS Grid layout

Community feedback

• 

  Dusan Brankov•860

  @dusan-bPosted almost 2 years ago

  Hello Omri,

  I just looked at your code and I like your approach. To make the card component responsive though, you should avoid specifying fixed widths and heights.

  The following changes allow you to omit the media query for card completely:

  .card {
    width: 100%;
    max-width: 400px; /* Let the container responsively grow up to 400px */
    padding-bottom: 40px; /* Instead of using a fixed height */
    background-color: #fff;
    margin: 0 auto; /* 'margin: 160px auto' is not a good solution to center vertically */
    border-radius: 10px;
  }
  

  To center the card, just add these three rules to the body:

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding-inline: 20px; /* Give some space on the sides, when screen width goes under 400px */
  }
  

  This way your card becomes responsive and is properly centered.

  Hope this helps. Happy coding!

  Marked as helpful

  0

  ---

  

  Omri•40

  @OmrividalPosted almost 2 years ago

  @dusan-b Thank you for your response! This helped alot!

  0