Mobile first , responsive product page using CSS grid
Design comparison
Solution retrospective
I completed the challenge for both mobile and desktop version. The biggest difficulty I faced is working with width. I'm still learning about best practices how to handle elements width in the page.
As per challenge style guide , the breakpoint for mobile is 375px. I'm still not sure what does this mean? does it mean the mobile version of design should appear if the device width is less than or == 375px which mean any width above 375px should get the desktop version??
I found some other solutions not helpful in this regard as they set break point for values like 500 or 600px or even more. Personally , I set the break point for 640px which is the sm size for a framework like tailwindcss.
This isse is still not 100% clear for me and I'm unsure about it.
Community feedback
- @amyspencerprojectPosted over 1 year ago
Hi Mohammed,
The design view dimensions are just what the webpage should look like at that specific viewport size. They are not intended to be the breakpoints. I usually set my breakpoints at 960px(60rem) and 640px(40rem). I had the same confusion when I started but read a post in the old FEM Slack channel that cleared it up. Hope this helps.
Happy Coding!!
Marked as helpful0@javascriptor1Posted over 1 year agoHi Amy @amyspencerproject ,
Thank you so much. The concept is clear now. With more practice and reading, I was able to understand it well.
Appreciate your feedback.
Have a nice time. MKF
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