Design comparison
Solution retrospective
My third work using Flexbox, I put all cards in position : absolute and then with a transform : translate I placed them. If there was an easier solution you can comment !
Community feedback
- @grace-snowPosted almost 4 years ago
Hi there,
Yes there is a much easier and more modern way to do this layout. I recommend you look up CSS Grid and learn how to use that. It is very rare to use transform translate for anything these days and it's definitely not a technique recommended for whole layouts.
Positioning absolutely should only be done in certain circumstances as it takes elements out of the document flow. That means you have to work hard to place everything else responsively on larger pages/projects.
Definitely learn CSS grid and use that or flexbox for layouts as needed ☺
ps. Remember to upvote comments on here whenever you find them helpful
3@memsbdmPosted almost 4 years ago@grace-snow Thank you again for your feedback ! I optimized the site for small devices this time :)
I will start learning Grid soon then !
1 - @memsbdmPosted almost 4 years ago
I forgot to remove a margin-top that's why cards are a bit down :/
2 - @guliye91Posted almost 4 years ago
First happy new year. After that, I cloned your code and gone through every line of code. I made the following observations:
- Too much use of transform in your layout. Transform layout has been extensively used in your layout to position element. Try to use CSS GRID to layout the items correctly.
- use of big margin-top before the 'supervisor item' that pushes the item more downwards.
- limit use of absolute positioning as removes the eleent from normal flow.
- makes the image smaller to perfect them.
- set the width of the item to space them correctly.
1@memsbdmPosted almost 4 years ago@guliye91 thank you for your detailed feedback, I will progress a lot with that !
0@guliye91Posted almost 4 years ago@memsbdm bro can we chat in whatsapp. I also want to learn more about you and in the process assist each other. kindly inbox +254720291253 glad to meet up
0
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