Skip to content
Submitted over 2 years ago

Responsive Card Component using CSS Grid

Lidia•280
@lidimi
A solution to the Single price grid component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I used grid for desktop view and flexbox for media queries. Any feedback is welcome

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Account deleted

    Hey, some suggestions to improve you code:

    • You want to use CSS Grid for both layouts so you learn and understand how Grid works.

    • The “30-day, hassle-free money back guarantee” is not a heading. It should instead be wrapped in a Paragraph Element.

    • The button was created with the incorrect element. When users click on the button they should directed to a different part of your site; that Anchor Element will allow this to happen.

    • Your button needs to have a :hover.

    • Implement a Mobile First approach 📱 > 🖥

    With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

    Happy Coding! 👻🎃

    Marked as helpful

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