3-Column Card Site with Flexbox

Community feedback

• 

  Fasih Mehmood•135

  @fasih-mehmoodPosted about 3 years ago

  Flexbox is definitely the way to go when it comes to centering elements. Also avoid using ID's as much as you can and make use of classes instead. Avoid using absolute sizes as well, instead of pixels, try using % or rem or em.

  Other than that, the solution looks great! Keep up the good work.

  Marked as helpful

  1
• 

  darryncodes•6,390

  @darryncodesPosted about 3 years ago

  Hi Faylette,

  Great solution, well done.

  Try this on your .container class:

  display: flex;
  flex-direction: column;
  flex: 1;
  

  And on mobile add align-self: start; to the <button> styles so the button doesn't span all the way across.

  Also you'll need to play around with margin-bottom: 75px; on your <p> too.

  Good luck!

  0

  ---

  

  Weed•10

  @ctweedPosted about 3 years ago

  @darryncodes hey bro , how to 3 div car no space between them.Thanks u

  0

  

  darryncodes•6,390

  @darryncodesPosted about 3 years ago

  hello mate (@ctweed). I'm not 100% sure what you mean. It sounds like you just need display: flex; on the parent container for your three <div>'s. This will stack them nicely into columns without space between them.

  0

  

  Weed•10

  @ctweedPosted about 3 years ago

  @darryncodes oke thanks, I haved fix it

  0

  

  darryncodes•6,390

  @darryncodesPosted about 3 years ago

  @ctweed ah, glad to hear it!

  0