Design comparison
Solution retrospective
While Building this project I learned media queries. I learned responsiveness. This is a simple project. They can be shortened but I did my best. First I made it for Mobile view. After mobile view, I made web view. So I want to ask is this is a good practice.
Community feedback
- @DavidMorgadePosted over 2 years ago
Hello man congrats on finishing the challenge!
To answer your question, yes! the mobile first workflow is one of the most used for web development!
Your card have a little problem, you are using
@media (max-width: 375px), this will only target sizes from 0 px to 375px, the only mobile device that is 375 is the IphoneSE 2020, if you want to get it working for all mobile devices you can just use@media(max-width: 768px).But, I would recommend you, for a cleaner mobile first workflow, that you start building your site with a mobile device screen size but without using media queries, then when you want to adapt it to tablet and desktop you can use
@media(min-width: 768px // for /tablet/ 1440px /for desktop/), when you are using min-width instead of max-width on your media query, you are getting your CSS from that desired size, to the next breakpoint, this means that mobile will be from 0 to 768px, tablet from 768px to 1440px and the rest on your 1440px media querie will be for desktop.Hope my feedback helps you in future projects! if you have any question, don't hesitate to ask.
Marked as helpful0
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