Mobile first , responsive product page using CSS grid

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.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@amyspencerproject
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 helpful
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