Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive CSS flexbox solution for single price grid template

Nebiyou Ersaboā€¢ 185

@NebiyouErsabo

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Howdy there, This is my fourth challenge here. It was a fun challenge to build as usual. I have attempted to make the page decently responsive with a hover state too. Any feedbacks, suggestions, shortcuts are very welcome. Thanks!

Community feedback

P
Graceā€¢ 27,350

@grace-snow

Posted

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

@NebiyouErsabo

Posted

@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,855

@vanzasetia

Posted

šŸ‘‹ 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%;
}
  1. (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

@NebiyouErsabo

Posted

@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,855

@vanzasetia

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord