Design comparison
Solution retrospective
This is my attempt at making a responsive product pricing page using CSS grids. I'm not very experienced in optimizing my CSS and making it organized yet. I'm working on it, so please excuse me if my code seems a little messy, I will try to do better next time. Any tips to improve it are highly appreciated. Also, if there is a shorter version of the js code I wrote please help me with it. I will be very thankful.
Community feedback
- @palgrammingPosted over 3 years ago
if you look at your challenge in browser 500px wide you will see that your cards are exiting the screen. You need to change your transition point between the desktop and mobile layout
Marked as helpful1@ProximamusicPosted over 3 years ago@palgramming thank you so much for the input I will definitely work on that. One small question, do I have to write media queries for every 100px ? i don't know much about responsiveness yet to would you please guide me a little about how to tackle this problem.
0@palgrammingPosted over 3 years ago@Proximamusic no you only need them when you have a element that you need to transition that will not longer scale correct or position its self on its own. The better you learn Flexbox and Grid the less you will need to the queries
1@ProximamusicPosted over 3 years ago@palgramming thank you so much. i will definitely work on that
0
Please log in to post a comment
Log in with GitHub
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