Responsive CSS flexbox solution for single price grid template

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi,

  This looks good ☺

  It's a bit of a shame you've created this with flexbox when it's so perfect for css grid, but it's still a valid approach.

  I'd definitely change the html a bit

  • swapping 2 of the h2s for h3s
  • swapping button for anchor tag as that would almost certainly trigger navigation
  • swapping the multiple paragraphs for an unordered list

  The other thing to look out for is repetition in your css. In media queries you only need to include the specific properties that need overriding, but you have repeated some (eg on the body)

  I hope these pointers help, keep on coding

  2

  ---

  

  Nebiyou Ersabo•185

  @NebiyouErsaboPosted over 3 years ago

  @grace-snow Yes, I could have used CSS grid but I dont think I'm as comfortable with grids as I am with flexbox. I am still fairly new to this stuff and grids is one of them. Duly noted the other suggestions as well. Thanks for your feedback!

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋 Hi Nebiyou! My name is Vanza!

  🎉 Congratulations on finishing this challenge! I know this challenge is a little bit tricky when you use flexbox. Me myself I try to use grid and flexbox to complete this challenge 😅. I have some feedback that maybe help you making this solution better.

  1. I think you should use box-sizing: border-box on your reset. That way when you add padding, it doesn't add more width.
  2. (This one is just personal preference) I would suggest that not to put any unit on 0 number.

  * {
    margin: 0;
    padding: 0;
  
    /* Is the same as */
    margin: 0%;
    padding: 0%;
  }
  

  3. (This one also just my preference) Lastly, I think using padding should be enough on button since the button by default display: inline-block. If you want make it 100% width, you use display: block

  That's it! Hopefully this is helpful! And as always happy coding Nebiyou!

  1

  ---

  

  Nebiyou Ersabo•185

  @NebiyouErsaboPosted over 3 years ago

  @vanzasetia Thank you for the feedback.That was very insightful, Vanza. I will definitely implement you suggestion and experiment more on CSS grids 👍.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  @Nebiyou12 You're welcome, I'm glad that I can help you!

  0