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 !
Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
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
- @memsbdm
I forgot to remove a margin-top that's why cards are a bit down :/
- @guliye91
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.
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