Mobile-first workflow solution using flexbox
Design comparison
Solution retrospective
The solution is made with the help of CSS flexbox and intentionally omitted CSS grid as the MDN suggest if possible use flexbox because the grid is comparatively newer than flexbox and that may concern with browser support, what is your opinion on that?
Here to simplify measuring the font size, margin and other similar properties gave body element font-size: 10px; as base size (so for 35px h1 element simply 3.5rem instead of 2.1875rem if the base is 16px) and used rem unit for font-size and em unit for properties like margin and padding for all elements, what is your opinion on that?
Community feedback
- @denieldenPosted over 2 years ago
Hi Shameer, great job!
You can check browser support in Can I use... personally I prefer flex except in cases where the design has a complex or "web" shaped choice.
Finally, it is always a good idea to use relative units of measurement rather than pixels
Hope this help ;) and happy coding!
Marked as helpful0@shameerkamaludeenPosted over 2 years ago@denielden Thank you Daniel Den for your valuable informations
1 - @EmmanuelHexerPosted over 2 years ago
Good job man. Keep it up
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