Skip to content
Submitted over 3 years ago

HTML & CSS

Mars - Martiniano Leguizamon•115
@martinianol
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

Hola!

It was extremely hard to place all the buttons at the bottom and aligned. Flex within and justify-content: space-between within the parent container did not work as I could either get the buttons and the top icons aligned but everything depended on how many lines were in the paragraph boxes. I finally did it by using

button {
  position: absolute;
  bottom: 2rem;
}

Previously declaring it's container position: relative. Problem was that it took the button out of the document flow (shrinking everything). So what I ended up doing was to place an empty div with a height the size of the button. Not sure if this is a proper technique but it did the work. If someone nows a better way, please do tell.

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Hey, Mars - Martiniano Leguizamon! 👋

    Well done on this challenge! 👍

    I'd like to suggest,

    • Adding cursor: pointer to the "Learn More" links in the card component.
    • Using flexbox (rather than margin or padding) to center the card component in the viewport.
    • Adding a little bit of space between the card component and the top of the page in the mobile layout.
    • Perhaps using something like CSS grid would help you position the items within the sections of the card a little better. Here's a great solution for this challenge (which nails the layout) that you might want to look at to pick up a thing or two from.

    Keep coding (and happy coding, too)! 😁

    0
    Mars - Martiniano Leguizamon•115
    @martinianolPosted over 3 years ago

    @ApplePieGiraffe Thank you so much for your feedback!!! Forgot about the cursor, you are right. I'll check out the solution you've sent me. Thanks again!

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    @martinianol

    No problem! 😀

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

    🌟🌟🌟🌟🌟 Looks good maybe some margin on the whole design in the mobile view but it looks good

    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