Four Card Challenge

Community feedback

• 

  Franziska Wich•210

  @franziskawichPosted over 3 years ago

  Hi Aleksandra,

  concratulation on completing this challenge. (:

  I noticed a few things. On very small devices ( < 360px) some text of your paragraph under your heading disappears completly and your cards are also cut off. Your cards stop shrinking at 400px, which causes the cutting. Usually it is good practice to not setting a hight and a fixed width on elements. Try using a margin or padding instead or min-height and min/max-width. This makes responsive layouts a lot easier. A mobile-first workflow could make things easier as well and not using px but rem/em/% units. Instead of repeating your code for each card (.card1, .card2. ...), you could give every card a second class with all the duplicate code. This saves you some time. To change the position of the icons I would recommend using flexbox and not transform (display: flex; -> parent element, align-self: flex-end; -> img/child element). For your grid I would recommend looking up the grid-template-areas property, this might help you positioning your cards correctly.

  Good luck and happy coding~

  Marked as helpful

  0