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

3-column preview card component

Pavan MG 70

@pavanmg007

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


faced few difficulties while using flexbox, somehow managed the website to look as same as the design. Let me know the errors and how to optimize further.

Community feedback

P
tediko 6,680

@tediko

Posted

Hello, Pavan! 👋

Great work! What i would suggest is to remove div with class .flex and move these styles to .container div. We don't need two divs, cleaner code. Then I would suggest to add some padding on top/bottom of body/container because your container stick to top/bottom on mobile. Lastly, you should create common class for your cards, so you don't repeat code - in your case you repeat only padding, but in future projects it may be more styles. So you should have f.e .card .card1' in classes where .card` contains the same styles for each box.

Good luck with that, have fun coding! 💪

0
Valeriu 150

@valy-s

Posted

Hi Pavan,

I think one way to optimize your code is to try writing the code for mobile first, think you should minimize the your CSS code.

0

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