Design comparison
Solution retrospective
Edit: these problems I have managed to defeat after removing absolute positioning of grid container and changing a bit grid template areas: (this applies to previous version of my solution:) -on iPad screen width got an an annoying <strong>space between top grid-item and header text </strong>, tried many ways to get rid of it, but do not know where the problem lies...
-also on smaller screens there is <strong>no white space at the bottom</strong> (last grid item sticks to the bottom, like margin-bottom: 0, but setting any margin does not help). I've had some problems with positioning it (position: absolute, bottom: -60% does not look elegant...)
-bonus issue :) when I've made a screenshot the page was much wider, than appearing in browser - how can I get rid of it despite overflow: hidden ??
I will be grateful for any feedback, stay safe!
Community feedback
- @ApplePieGiraffePosted over 3 years ago
Hey, Igor! 👋
Good effort on this challenge! 👍
Many of the layout issues you are noticing can probably be fixed by avoiding using absolute positioning to layout the design of this challenge. Tools like flexbox or CSS grid can the job done faster and easier and make making the design responsive easer, as well. I suggest taking a look at some other solutions to this challenge (by hitting the "Challenge Hub" link in the hero section of this page and navigating to the "Solutions" tab) to see examples of how others have laid out the design of this challenge. Here's one that has a pretty good layout. 😉
Besides that, I think decreasing the intensity of the border-radius just a tad (to match the original design) would be a nice touch.
Keep coding (and happy coding, too)! 😁
Marked as helpful0@bubahazePosted over 3 years ago@ApplePieGiraffe thanks a lot for feedback! Your link to other solution is valuable, as it is well-organised with catchy animation, and I didn't reckon I could use flexbox here instead grid 😲. I did use grid, but I couldn't center it in satisfying way without absolute positioning (I failed at this point). Anyway, gonna improve this solution thanks to you. Cheers!
1
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