Responsive card page using CSS Flexbox and Grid

Community feedback

• 

  darryncodes•6,350

  @darryncodes

  Posted over 3 years ago

  Hi Niladri,

  Great solution, almost a perfect match!

  Some great feedback from Buhaianu, in addition:

  • you could clear up your accessibility report if you change <div class="attribution"> for <footer class="attribution">
  • your design is jumping because you're adding a border to the button on hover, add it before and it should solve this
  • as this design is one dimensional i think the more suitable option would be to use flexbox, here is some information that might explain what i mean further

  Overall though great effort!

  11

  Marked as helpful
• 

  Remus D. Buhaianu•3,125

  @remusbuhaianu

  Posted over 3 years ago

  Good job on completing the challenge, @NiladriMallik!

  Your solution looks pretty good overall. I have a few suggestions for you that I hope will prove useful:

  • The background color is different. It's supposed to be a darker gray

  • When you hover on one of the buttons, the card's height increases. That shouldn't happen.

  • You should either keep a 3 columns or a 1 column layout when going into the tablet screen sizes. Currently, when you reach that resolution, you have 2 columns one next to another and the third is underneath.

  • Consider using fractions for your grid instead of %

  Hope this helps. Keep up the good work!

  00

  Marked as helpful
• 

  Niladri Mallik•50

  @NiladriMallik

  Posted over 3 years ago

  Thank you @Remus432 for the advice.

  1. Yes, I had forgotten the background colour, added that now.
  2. I couldn't think of a way to solve that problem, have solved it now.
  3. Yes, I was confused about the layout of the tablet screen, I thought a grid layout with 2 columns would look good. However, I have solved that too.
  4. And thank you for the fractions advice, shall certainly look that up.

  10