3 Column Preview Card Component using FlexBox

Community feedback

• 

  darryncodes•6,370

  @darryncodesPosted over 3 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!

  Marked as helpful

  1

  ---

  

  spyder•315

  @ratan17Posted over 3 years ago

  @darryncodes thanks so much for taking your valuable time and giving a feedback to my solution.

  Response to your suggestions :

  1. For Buttons Styling : I have set the styling for active state of buttons not to the hovering state. So when you'll click the buttons the required styling will be applied.
  2. For buttons position : I'll surely take your suggestions into consideration and do the necessary changes.

  Happy Coding to you too brother🤝

  0
• 

  Yashasvi Singh•890

  @aUnicornDevPosted over 3 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.

  Marked as helpful

  1
• 

  Yashasvi Singh•890

  @aUnicornDevPosted over 3 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.

  Marked as helpful

  1

  ---

  

  spyder•315

  @ratan17Posted over 3 years ago

  @aUnicornDev bro i have set the @media query for smaller screens but even though they aren't working....could you explain why ?

  0
• 

  spyder•315

  @ratan17Posted over 3 years ago

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

  0