Responsive 3 column layout webpage HTML5,CSS3,Flexbox and Grid

Community feedback

• 

  darryncodes•6,390

  @darryncodesPosted about 3 years ago

  Hi Nuray, another really great solution - well done!

  This is what you'd need to do to push the buttons down to stay on the same line:

  .parent { display: flex; flex-direction: column; }

  .parent .child { flex: 1; }

  I think you may have over-used flex properties in your solution and they're conflicting. Your .wrapper class is redundant, you could just use the .box class for your styles. And you don't need display: flex; on your button for the desired outcome.

  This is an awesome resource by css tricks - great to reference each time you code a solution.

  All the best 🤙

  0

  ---

  

  Nuray•100

  @ganbnurayPosted about 3 years ago

  @darryncodes what do you mean by parent and child? the parent of the button is wrapper so do i need to remove wrapper so the parent becomes box and I apply those flex properties to box and button?

  0

  

  darryncodes•6,390

  @darryncodesPosted about 3 years ago

  Hi @ganbnuray sorry if i wasn't clear.

  I just mean what ever class you choose to be the parent so in your current example .box looks like the parent element add display: flex; and flex-direction: column;.

  Then the children will need to be your <img> <h1> <p> and <button>. Then add flex: 1; to the <button> this would be the child element to your .box class.

  At the moment you have a few extra <div>'s that aren't needed and are becoming the flex children, not the 4 above that you want to manipulate.

  1

  

  Nuray•100

  @ganbnurayPosted about 3 years ago

  @darryncodes it worked :) thank you a lot)))))

  0

  

  darryncodes•6,390

  @darryncodesPosted about 3 years ago

  ahhhh so glad haha @ganbnuray

  0