Responsive four card section

Community feedback

• 

  Aatypic•490

  @AatypicPosted about 2 years ago

  Hello and congratulations on your solution !

  On this project maybe the easier approach was to use Grid instead of flexbox for the <main>. There is some weird behavior between the cards, when shrinking the devices width e.g. on tablet the 2 cards in the .container are not responding the same way as the 2 on the sides.

  And if you noticed on the design, the spacing between the cards is like an H and the spacing is equal.

  I know everyone's site doesn't need to match the exact design but I don't think you did this on purpose.

  For the grid you could do something with 3 columns, and not forget that you have to remove the <div class="container" >. Now your 4 different cards are direct children of <main> and you can place them individually on the grid.

  main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  }
  

  Here is help to place the cards > https://css-tricks.com/snippets/css/complete-guide-grid/

  Nice hover effect on cards !

  Good luck ✌️

  Marked as helpful

  0

  ---

  

  Edet John•220

  @cyberohn2Posted about 2 years ago

  @Aatypic thanks so much. i actually don't know how to use grid, but i'll learn how to use it try to implement it thanks so much.

  0