Four card feature section

Community feedback

• 

  Bethany•855

  @whimsicurl-creationsPosted over 4 years ago

  Great job, Alvaro. Your solution scales well and does a pretty good job of matching the design. A few minor tweaks will get it even closer to the design.

  1. The background of the whole site should be the light-grey variable you set, not a pure white (this shows up best in the split-screen above).
  2. There seems to be a small typo for your favicon link, which is causing the HTML issue. Fix that typo and run the report again once your solution links are updated.
  3. For tablet sizes, the text within the cards isn't all aligned to the left. It's most noticeable just after the breakpoint when the screen is still wide, but the cards with less text (Supervisor and Karma) have more space to the left. You can update this with a media query adjustment on your flexbox properties for the main__card-item class.

  It sounds like flexbox wasn't your first choice for the layout, but you did a nice job with it. If you were wanting to use CSS Grid, you can check out others' solutions to this challenge (I used grid, but with coding there is often more than one way to achieve a certain look). I also highly recommend the Resources page here on Frontend Mentor. There are so many great resources there for both grid and flexbox that can add to your learning. Keep up the great work!

  1

  ---

  

  Alvaro Másmela•200

  @ShadowbestPosted over 4 years ago

  @whimsicurl-creations Hello, thanks for commenting on my solution. I already fixed the typo in the html as well as the page background color. Although the text alignment in the card couldn't fix it, the text is already aligned to the left.

  Modifying the alignment properties on the .main__card-item itself didn't change anything.

  1

  

  Bethany•855

  @whimsicurl-creationsPosted over 4 years ago

  @Shadowbest It looks as though your updated solution no longer has the alignment issue either. Great job on taking the feedback to improve what you did. Keep working and keep coding. We look forward to seeing more solutions.

  2