Skip to content
Submitted over 3 years ago

3-column-preview card component HTML and CSS

Melvin•270
@MelvinMelonGit
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

Hi there,

Thanks for viewing and commenting on my project.

  1. May I know how to align the buttons at the bottom? They seem to be affected by the paragraph above.

  2. Please let me know how I can improve on my code.

Community feedback

  • Eric Salvi•1,330
    @ericsalviPosted over 3 years ago

    One easy solution to push the button to the bottom and keep it there is with the beauty of margin-top set to auto. This can only work however if the 3 card containers are using flex. Which they currently are not.

    As for the code itself, it looks good. The only thing I would pay closer attention to is the breakpoint set at 375. There are no mobile devices that small and you have it set to a max-width, meaning only screens smaller that 375 will see the mobile responsive layout. I'd play around with maybe adding a range of a min-width of 375 and a max-width of a bit higher number. Something that looks good to you and adjust the cards accordingly because right now at 376px wide, the 3-columned cards look too squished.

    0
    Melvin•270
    @MelvinMelonGitPosted over 3 years ago

    Hi @ericsalvi,

    Thanks for your detailed reply!

    I will relook my code with your suggestions.

    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