Skip to content
Submitted over 1 year ago

Responsive component made with CSS Grid

Amy Spencerā€¢300
@amyspencerproject
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I am trying to adhere to the DRY principles so I broke the stylings into base classes and specific classes. I also used CSS variables for the colors. Overall this challenge went fairly smoothly which means I am becoming more intuitive with my CSS styling šŸ„³

Community feedback

  • Paulā€¢470
    @mayor-creatorPosted over 1 year ago

    Hi Amy,

    Well done on finishing this challenge.

    I recommend reading CSS Grid vs. Flexbox: Which Should You Use and When?. This outlines when to use flex or grid during your project.

    On the mobile view screen, the buttons are out of shape. Adding margin (margin-top: 1.875rem) and removing the other margins will fix the shape issue on the mobile view screen) .

    I hope this helps. Happy coding!

    Marked as helpful
    1
    Amy Spencerā€¢300
    @amyspencerprojectPosted over 1 year ago

    @mayor-creator Thank you so much! Appreciate the feedback and the article link. Deciding on whether to use Flex or Grid is something I am still unsure of.

    Also I don't know who put all those extra margins in my code šŸ¤£ šŸ¤£ šŸ¤£

    0

Please log in to post a comment

Log in with GitHub

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