3-Column Preview Card Component Main Solution

Community feedback

• 

  Harsh Kumar•1,390

  @thisisharsh7Posted about 2 years ago

  Hello Douglas Barcelos, well done! your solution looks perfect.

  Your page responds well to different widths. You used flexboxes here, which is a great tool for creating responsive designs. Your HTML code is clear and easy to read for anyone. In the same way that you used justify-content: center here, instead of using padding in the body, you can add align-items: center to it to help center the items vertically. Padding added extra widths and heights, which is why your page has a scrollbar.

  hope this helps you, happy coding ✌️.

  Marked as helpful

  1

  ---

  

  Douglas Barcelos•120

  @developer-barcelosPosted about 2 years ago

  @thisisharsh7 Hey Harsh Kumar. Thanks for the tip. At first I thougt of using align-items: center, but I realized that the cards are not perfectly centered vertically, according to the model. The space on the top is bigger than the space on the bottom. Thats the only reason why I did not used it, to get it even closer to the model, evento though its not a good practice. Thanks for the tip again! I hope you would give me some more tips on upcoming challenges!

  1
• 

  MhmodMD•230

  @MhmodMd1Posted about 2 years ago

  Perfect man keep it up

  1
• 

  Vodina Efem•120

  @SimplyvodaPosted about 2 years ago

  Hey ! Very good job on this. How do you get your work to be the exact same size as the original design ? Any tips you could share ? Thank you .

  0

  ---

  

  Douglas Barcelos•120

  @developer-barcelosPosted about 2 years ago

  @Simplyvoda Hey Vodina, thanks for the comment! To get my work the closest to the design as possible I learned how to use Figma, once I am not a premium user, thus I have no access to a Figma file provided by Frontend Mentor. I suggest you learn how to use Figma (if you want to get your work as close as possible to the design). The learning curve is not too long. It took me about two weeks to get up and running with Figma. There are nice tutorials for free on youtube. I hope this comment was helpful somehow! Message me if you need any help! Thank you!

  1

  

  Vodina Efem•120

  @SimplyvodaPosted about 2 years ago

  @developer-barcelos Thanks for the tip :)

  0