Submitted over 3 years ago

HTML & CSS

Mars - Martiniano Leguizamon• 115

@martinianol

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

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

@ApplePieGiraffe

Posted 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)! 😁

Mars - Martiniano Leguizamon• 115

@martinianol

Posted 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!

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@martinianol

No problem! 😀

Patrick• 14,285

@palgramming

Posted over 3 years ago

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

Please log in to post a comment

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