Mobile first responsive solution to Single Price grid UI challenge

Community feedback

• 

  P

  Alper•1,010

  @adonmez04Posted almost 2 years ago

  Hi, @kanuos. It's a really good solution. Keep coding. I have a suggestion for you.

  You can use grid-template-rows:repeat(3, auto); instead of grid-template-rows; repeat(3, 1fr); for your body > article element. It calculates elements' height values depending on their content. However, the grid items height values should be individual. This will make your design more responsive.

  I hope this will help you to improve your perspective. Keep coding. All the best.

  Marked as helpful

  0

  ---

  

  Sounak Mukherjee•560

  @kanuosPosted almost 2 years ago

  @adonmez04 That's a great suggestion. I don't know how I missed it. Will fix it. Thanks a lot :)

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace the article tag <article> with the main tag to fix the accessibility issues. click here for more on web-accessibility and semantic html.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  Sounak Mukherjee•560

  @kanuosPosted almost 2 years ago

  @Hassiai You mean the main should be the parent of the article in the codebase right?

  0

  

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  @kanuos yes

  0

  

  Sounak Mukherjee•560

  @kanuosPosted over 1 year ago

  @Hassiai got it

  0