CSS GRID responsive design

Community feedback

• 

  Harsh Kumar•1,390

  @thisisharsh7Posted about 2 years ago

  Hey Salman, well done! solution looks nice. I have made some changes to your code so that you can resolve your issue

  replace  
  .cards{
  width:60%;
  }
  //since there are 3 cards in a row giving 60% width to all means each
   card gains 20% width which will appear small to an user thus change this to
  .cards{
  max-width:100%;//max-width means cards can take upto full 100% width or less than it
  }
  
  //for aligning the full content to the center at any screen sizes you can use this
  body{
  min-height:100vh;
  display: grid;
  place-content: center;//center on both horizontal and vertical axes
  }
  // remove width from .card{width: 280px};
  //It prevents the card from shrinking and makes the solution unresponsive
  

  I hope this works for you, happy coding.✌️

  Marked as helpful

  2
• 

  kounik•300

  @Valhalla-2Posted about 2 years ago

  First of all great job on completing the challange , And about your question your solution does include semantic HTML but the order are incorrent , <div> tag should inside the semantic tags like <main> , <section> , <header>. <div> , <span> these are non semantic tags . Read This ,you will get a better idea about semantic HTML . As for improvements you could unset width & height of the cards, pixels unit are absolute, there are not responsive to the screen sizes, For this issue, size their widths & heights with declaring the grid column & grid-row , that way they would be more responsive , this would stop the cards from overflowing their parent <main> tag . For this challange i used minmax() function to declare grid rows and columns, cause i wanted specific sized yet responsive columns and rows. You could check This doc about How minmax() function works .Yes, it looks great on small devices you did a great job rather i did when i first tried @media queries . For better readability and reusability , you could left comments for other developer.I wish i helped u a little .Don't worry, Keep practicing you will get there I am a newbie myself , wish u Happy coding journey ,,,,

  Marked as helpful

  1