Design comparison
Solution retrospective
I found it challenging to find a logical place for the attribution. I enjoy taking a zoomed in look around the proportions and scales of things, but placing them on the canvas can get tricky. I may have found a working solution of simply using flexbox and centering things that way, with the html getting a 100% height, this works really well for single item presentations.
When there's not too big of a visual difference in the mobile vs desktop view, it can get tricky sometimes to tell the difference but I enjoyed it very much.
Any feedback is appreciated!
Community feedback
- @vinshieldPosted over 2 years ago
Hi Waikoo, to place the attribution neatly at the bottom center of the page, I usually set it's css position property to absolute, then I give it left: 0; right: 0; bottom: 0;
Hope this helps!
Marked as helpful1 - @a1excpunkPosted over 2 years ago
Good job, but one thing that stood out is height when the screen is shorter than the component, the component doesn't scroll, top part "disappears".
tip_1: Use, in your case, body{min-height:100%;} instead of just height. tip_2: Add some body padding to separate the card from the edges a little bit.
Good Luck and Keep Going 🤘🏻
Marked as helpful1 - @correlucasPosted over 2 years ago
Hello Waikoo, congratulations for your solution!
I personally don't like to put the attribution, the solution seems better without, also in if you look in the comparison slider there's no attribution so you can just avoid and place your clean page design.
About your solution everything's fine, you can consider pay attention to the box-shadow trying something smoother and to fix the accessibility issues.
Congrats!
Marked as helpful1
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