Skip to content
Submitted almost 3 years ago

3 column card component HTML CSS and Grid

Morgan J.•60
@MorganEJLA
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

Community feedback

  • Candela Bramucci•680
    @bramuccciPosted almost 3 years ago

    Hi Morgan! It's easy, just remove the margin-bottom from the buttons and add margin-top: auto. Also, I think you should make a div that represent the card. Inside, have three divs for the sections. Something like div.card>div.card__division*3. Then, you could put border-radius to the parent div and overflow: hidden to make the child follow it. To finish with, increase the line-height on the paragraphs. Wish this help you!

    Marked as helpful
    0
  • Fraser Watt•1,790
    @fraserwatPosted almost 3 years ago

    Hey Morgan, this is looking really good!

    Few pointers:

    • As you have the HTML element <main>, you don't need class="main" and can just target everything in CSS with main { your rules here }.
    • Would take the margin-top and min-height out of the <main> element (generally want to avoid defining heights and widths as much as possible for responsiveness), have the min-height on the <body> instead, and then play around with auto margins for <main> and <footer> elements to center the main and move the footer down to the bottom.
    • If you take out the width CSS attributes from the <p> and .card elements, you can have a more responsive design, especially on mobile (you'll want to use padding on <body> to stop it going right up to the edges of the screen).

    Keep up the good work ,this is great!

    Fraser

    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