3 Column Preview Card Component - HTML5 / CSS3

Community feedback

• 

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  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

  ---

  

  Dennis Griffin•1,320

  @dgdev1024Posted over 3 years ago

  @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