Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3 Column Preview Card Component - HTML5 / CSS3

@dgdev1024

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


The issue with this one is that CSS's justify-self property doesn't work in Flexbox. I worked around this by absolute-positioning the call-to-action buttons to the bottom left, accounting for padding, then applying some compensatory bottom-margin to the description text. Let me know how this turned out.

EDIT: Erroneously said align-self, when I meant to say justify-self.

Community feedback

P
tediko 6,580

@tediko

Posted

Hello, Dennis Griffin! 👋

Good effort on this challenge! Your solution responds well. I take a moment to look at your issue and indeed, there is no align-self in Flexbox but you don't have to position absolute your buttons to achieve this. From preview-card__cta button element remove position: absolute, bottom: 48px and left: 48px. From your .preview-card__text paragraph remove margin-bottom: 64px and to preview-card__column flex container add justify-content: space-between.

Good luck with that, have fun coding! 💪

1

@dgdev1024

Posted

@tediko Before I get to my reply, I erroneously said align-self in the solution description; I actually meant to say justify-self. My apologies for that; the description has since been corrected.

With that being said, I did try using justify-content: space-between, but then the elements in the column would not line up like I wanted - matching up with their placement in the desktop design image. I also tried using a grid layout, too, to no avail - that was adding an unexplained padding to the image in the rightmost column, throwing everything off again.

Much thanks for the input, though.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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