Four card feature section with HTML and CSS flexbox

Community feedback

• 

  Karim•590

  @yasssuzPosted over 3 years ago

  Hi, Akshay 👋

  It's very hard to make it responsive when you're using flexbox in a two-dimensional layout. You should learn CSS grid, it will make your life way easier in layouts like this one. To start with CSS grid you should take a look at this guide.

  happy coding and if I was helpful please upvote my comment :)

  1

  ---

  

  Akshay Meshram•390

  @akshay63Posted over 3 years ago

  @Galielo-App I thought of using CSS grid as you mentioned cards are laying out in Two dimensional, but I thought using flexbox for this simple section was much easier than CSS grid. I will definitely try the CSS grid for this project. Thanks for the suggestion.👍

  0

  

  Karim•590

  @yasssuzPosted over 3 years ago

  @akshay63 grid is a little weird when you're first starting, that's completely normal. And I agree, sometimes is harder to use grid even in bi-dimensional layouts, but you need to think about the responsiveness of your app. If you want, take a look at my project Social Proof Section and look at what I've done with grid :)

  0
• 

  Samuel Palacios•615

  @samuelpalaciosdevPosted over 3 years ago

  Hi, Akshay 👋

  Well done on this challenge! Your solution looks good and it scales pretty well.👍

  I only suggest some things 😉:

  • Maybe, you don't need height on the cards. I mean, setting an explicit height, could cause you some problems, when talking about responsivenes, you could try to get the same result using padding.

  I hope this would help you, have a nice day, keep coding!💙

  1

  ---

  

  Akshay Meshram•390

  @akshay63Posted over 3 years ago

  @samuelpalaciosdev Yes, you are right. The content should define the height and we could padding to increase the white space inside the component.

  0