Design comparison
Solution retrospective
I liked the end result for the shadows and hover effects. I would like to keep working on flex then proceeding onto grid
What challenges did you encounter, and how did you overcome them?My initial intention was to set the "attribution container" at the utmost bottom while keeping the "card container" in the middle. I found it the impossible since justify-self doesn't work on flex. if this scenario is possible with flex alone id like to know how to
What specific areas of your project would you like help with?I know "align-items" aligns depending on "flex-direction", however is there any alternative to "justify-self" for flex when aligning items either vertically or horizontally?
Community feedback
- @Alex-Archer-IPosted 5 months ago
Hi there!
Yep,
justyfy-self
works with thegrid
but not withflex
. Childs of flex hasalign-self
but that's won't help you as it's align element by the X axis (or Y ifflex-directon
isrow
).So, I guess you can use positioning (
fixed
orabsolute
) to stick attributions to the ground, but this might be clumsy if the height of the content will larger than the height of the screen.Or you can put your card into the
main
tag ang attributions into thefooter
tag, set height of themain
to90%
(or something close) and then it'll take 90% of the screen as height of it's parent -body
- is 100vh. Thefooter
with the attributions will take another 10%.By the way, speaking of the
main
tag - there should always be one on the page for the better semantic. Also it goes forh1
tag as well. Especially if you have plenty of otherh
=)Oh, I like how you style attributions matching the overall theme! It's cool to add something your own to design =)
Well done, neat work! Good luck with coding =)
0@joshuapocPosted 5 months ago@Alex-Archer-I Pretty much obliged for your comment, it did guide me in the right direction. I did some digging bases on your comment and Ive uploaded what i think to be a better solution to this challenge on github(soon to be reuploaded here). In it i used both flex and grid. Again thanks a bunch
1@Alex-Archer-IPosted 5 months ago@joshuapoc
Wow. Use flex and grid together sound a bit complex especially for such simple project, but still cool. There is always fun in experimenting! Very interesting to see what you came up with =)
Glad that I could inspire creation of a new approach =)
Marked as helpful0@joshuapocPosted 5 months ago@Alex-Archer-I haha yeah so complex the implementation of both display properties and unnecessary at that, but yeah i wanted to understand them better. I reuploaded the solution should you want to see it. Again thanks for your help
1@Alex-Archer-IPosted 5 months ago@joshuapoc
Yep. A bit complex, a bit redundant, but cool, nice to look and based on combination of different techniques. Just like a piece of art =)
That's interesting =)
Oh, another tip. Don't use id for styling. Later, in big projects, you'll see that it is more convenient to use classes for styling and id for references.
Marked as helpful0
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