Responsive Card using CSS grid

Community feedback

• 

  バレンタイン 😈•64,190

  @VCaramesPosted over 2 years ago

  Good job!

  At quick glance I noticed that your card is not centered in your page.

  To fix, add the following to your body:

  • heigh: 100vh;
  • display: grid;
  • justify-content: center;
  • align-content: center;

  Marked as helpful

  0

  ---

  

  omar saleh•150

  @omarsaleh11Posted about 2 years ago

  @vcarames can u look at it now

  0
• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  👾 Hello Omar, congratulations for your solution!

  Answering you question:

  To set the mobile view you need a media query, you've set it almost correctly, note that there's no need for grid-template-row; since you can use grid-template-row: 1fr; to make it a single column component. See the code fixes below

  @media only screen and (max-width: 550px)
  .container {
      grid-template-columns: 1fr;
      /* grid-template-rows: 1fr 350px; */
      max-width: 100%;
  }
  
  

  Applying that you need only to give some padding to the button that is attached to the component bounds.

  Hope it helps you and happy coding!

  Marked as helpful

  0

  ---

  

  omar saleh•150

  @omarsaleh11Posted about 2 years ago

  @correlucas can u look at it now

  0
• 

  omar saleh•150

  @omarsaleh11Posted about 2 years ago

  I think I made it

  0