3 Column Preview Card Component using FlexBox

Community feedback

• 

  darryncodes•6,350

  @darryncodes

  Posted almost 4 years ago

  Hi Spyder,

  Good work on your solution.

  A couple of observations at a glance from me:

  • you could add a hover affect on <button> to match the design. Set a transition property so when the user hovers over the button the hover affect is smoother for example: transition: .3s; or transition: ease-in .3s;
  • don't forget to add background: transparent; and the relevant font color: color: hsl(0, 0%, 95%); to the hover state
  • as you're using flexbox you could use align-self: start; on the button so on mobile it doesn't span all the way across the card like on the design. you'll need to play around with the padding left & right to get the right button size though

  Happy coding!

  11

  Marked as helpful
• 

  Yashasvi Singh•890

  @aUnicornDev

  Posted almost 4 years ago

  You have used position: absolute; on the Learn More button with a bottom:5%.

  This takes the button out of the normal flow of the card and fixes the button on the card. Changing the height of the button will not affect the height of the .items

  So, the content that remains in the card is just the SVG, the heading and the paragraph and the button is placed in the 5% padding given to .items

  When on smaller viewport, the value of 5% decreases, whereas the the dimensions of the button remain the same.

  Head over to my solution if you like, I've used flex in the card itself.

  10

  Marked as helpful
• 

  Yashasvi Singh•890

  @aUnicornDev

  Posted almost 4 years ago

  On smaller screens, the buttons are overlapping the content of the card because of the absolute positioning given to them.

  Instead, use flex on the .items class so that you can position them in accordingly.

  Set a max-width to the cards as they keep on stretching on bigger screens.

  11

  Marked as helpful
• 

  spyder•315

  @ratan17

  Posted almost 4 years ago

  I have UPDATED MY SOLUTION GUYS !! PLEASE HAVE A LOOK

  00