Design comparison
Solution retrospective
My solution to this challenge was to use flexbox to vertically and horizontally center the component on the screen, split the description area and the image, and provide the inline positioning of the different stats.
My biggest question has to do with scrolling on mobile devices. As of right now, I am setting my display: flex; on the <body> element, which has height: 100%; to vertically center the component. Because this component is fairly tall, on smaller mobile devices, the body element's height is actually less than the component, which causes some of the content to not be scrollable.
I messed around with using display: grid; but I haven't been able to find a reliable solution that maintains vertical alignment and automatically adjusts the body's height to fit the content on smaller devices. I would appreciate any kind of insight on this! There is also some refactoring that I need to work on with my CSS!
Thank you!
Community feedback
- @Ryan-HemrickPosted almost 2 years ago
A quick update to my solution.
I have replaced the previous height declaration of height: 100% on the <body> element with a min-height: 100%; instead. This has solved my problem with the component getting cut off at smaller heights. Before setting a min-height, the <body> element's height would only ever reach 100% of the viewport height. With min-height: 100%, the body now automatically adjusts it's height to match the component, while maintaining vertical centering
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