Flex, ::before for border top, transformtranslate to move cards
Design comparison
Solution retrospective
Super happy with the outcome, matches designs and is responsive, however any tips on any bad practise that may have occurred would be great, I always worry I'm going about things the wrong way, for example between 1160px and 1200px my cards pop out, would it be required to fix this in proper production? Cheers.
Community feedback
- @palgrammingPosted over 3 years ago
well with Grid template areas you can reagrange the cards and control them more to keep that from happening cause you can make different grid layouts for each break point and easily place what card you want in what ever spot
The main think I might change now is in the 2 column card layout you have a transition of the top header text font size changing I think you could just have that happen when the cards go down to the one column and keep the big text the whole time for the two column layout
0@nfjwebukPosted over 3 years ago@palgramming
Thank you my man, I find flex a little easier at the moment as haven't played with Grid all that much, I guess it would be fun to do this again and try it that way also, as for the header font size, yeah that would be a great idea. Cheers.
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