Responsive CSS flexbox solution for single price grid template

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!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
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
- @vanzasetia
👋 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.
- I think you should use
box-sizing: border-box
on your reset. That way when you add padding, it doesn't add more width. - (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%; }
- (This one also just my preference) Lastly, I think using
padding
should be enough onbutton
since the button by defaultdisplay: inline-block
. If you want make it 100% width, you usedisplay: block
That's it! Hopefully this is helpful! And as always happy coding Nebiyou!
- I think you should use
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