First solution of a beginner with Flexbox, SCSS and Mobile-first
Design comparison
Solution retrospective
1- Is the "mobile first" application of media queries good? Especially (min-width) and (max-width). I hesitate when I want to use it. 2- When i was ending this challenge i hesitate to do the mobile version, because i would use the phone to scan the qr. My ask is: Is the mobile version necessary for this project?
Community feedback
- @vanzasetiaPosted about 2 years ago
Hi, Romina! 👋
The mobile-first approach means that you write the default styling for the mobile layout. Then, use
min-width
media queries to adjust the layout when it is necessary.For this challenge, it is not needed to think about it since the mobile and the desktop styling for the website is the same. It means that the site can be responsive with no media queries.
Also, there's no need to create another version of this website. A responsive website means that this website looks good on all devices. So, you only need to create one responsive website that can look good regardless of the users' device.
I recommend reading the "Responsive design ground rules" blog post. This may help to understand more about creating a responsive website and give you a guide on how to create a responsive website.
I hope this answer all your questions!
Marked as helpful1@romina-gzaPosted about 2 years ago@vanzasetia thanks for your feedback, I will read that page!!
0 - @yishak621Posted about 2 years ago
The mobile first approach is the most commonly used professional approach its not mandatory but helpfull....these is the just a beginning small project but for more advanced big projects u will see that why its more important ....its easy to write media query for pc the changes for pc version is much easier i think ..but remember its not a must its ur choice
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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