Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four card feature section using flexbox

@rockbott0m

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


First time using "em" and I need some tips. Because I have feeling that I used them wrong.

Community feedback

Bethany 855

@whimsicurl-creations

Posted

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

@adarshcodes

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord