Four card feature section using flexbox

Community feedback

• 

  Bethany•855

  @whimsicurl-creationsPosted over 4 years ago

  Mateusz, nice job with your solution. A few quick comments:

  1. The layout for tablets (between 680px and 975px) is unexpected because of having the three columns of content. I recently completed this challenge, but I approached it with CSS grid, so my code was a bit different.
  2. The use of ems seems to be okay, but your font-size and line-height for your h1 and h2 are competing. You only have 1.5em for the line height which can't allow for 2.3em of font size. This is fixed with a larger font size on larger screens. I always like using CSS Tricks for reference, and this is a link on their site about REMs and EMs: https://css-tricks.com/confused-rem-em/ It's brief, but it also has a link to another article with a more in-depth look between REM/EM/PX.

  3
• 

  Adarsh Pratap•5,515

  @adarshcodesPosted over 4 years ago

  Hey! @Mateusz Gryczan, Your solution is fine, but it needs a few changes-

  -I saw your code and find that as @whimsicurl-creations told about the tablet layout which turns into three columns, you use 'flex-wrap: wrap;'. I also did this challenge using CSS-Grid, but instead of using wrap property you can write a few more lines of Flexbox and it'll look great.

  -For units(rem and em), you must consider the link provide by @whimsicurl-creations, I also read it few weeks ago and it helps me a lot in improving my code.

  1