Skip to content
Submitted over 1 year ago

Responsive 3 Column Preview Card using CSS Grid

Katlego Makama•70
@KatMahn
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Please comment on how my code is structured and if there is a way I could have done it differently

Code

Please log in to post a comment

Log in

Community feedback

  • Thomas Burette•190
    @tburette

    The result looks nice. It doesn't exactly match the given design and that's okay! (Adjusting a layout to closely match the given challenge is a lot of time for little payoff.)

    In the HTML:

    • There is an unclosed HTML comment at the end
    • <div class="attribution"> could be a <footer
    • you used an <h3> for the link/button. Isn't there an HTML that would be a better fit?

    In the CSS:

    • When the viewport is just above 830px part of the content is not visible and there is horizontal scrolling. There seems to be some kind of mixup in your media queries (@media).
    • You could implement the effect on the button when it is active (see design/active-states.jpg)
    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