Skip to content
Submitted over 3 years ago

Solution for 3-column preview card using CSS Grid

Denzell Dy•30
@DenzDy
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

Any tips to improve the responsiveness of the website? Aside from using clamp(), im still not sure how to make parts of the website responsive. Should I have made a div for the buttons to resolve the position issues when resizing? Also, it seems that for the desktop version of the website, the viewport height is too big. How do I change the height to browser height instead of display height? Currently use 1080p but is there a resolution for browsers?

Community feedback

  • Patrick•14,265
    @palgrammingPosted over 3 years ago

    If you put a common height on the paragraph text in the cards then that will solve your button alignment issue at some widths

    0
    Denzell Dy•30
    @DenzDyPosted over 3 years ago

    @palgramming Any tips on website responsiveness? I don't really feel confident on the responsive part of the website yet.

    0
    Patrick•14,265
    @palgrammingPosted over 3 years ago

    @DenzDy in this case I think your challenge looks OK you might think about working through this free certificate if you have not done it yet https://www.freecodecamp.org/learn/responsive-web-design/

    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