Design comparison
Solution retrospective
Am in my first few weeks of learning, but wanted to get responses on possibly a simpler way of formatting this without using quite so many classes. Any input appreciated.
Community feedback
- @grace-snowPosted about 4 years ago
Hi Monica,
I'm afraid this doesn't work at all on mobile. And I can see purely from the code that this approach wouldn't work great for desktop either, sorry 😕
The main crux of the problem is using absolute units for everything,which results in a static layout that only looks right on your exact screen size + resolution.
Suggestions:
- learn about relative units like % vh vw fr
- learn a bit of flexbox (there's some great resources on the resources page to help with this
- look into what alt text is for / how it works. (Much better to leave alt attributes blank for decorative images)
- start with mobile layouts before moving on to larger screens - look into min-width media queries.
- Make sure your html would make sense of just written as a document with no styles. (You can even turn styles off in the browser to preview!) eg. the numbers in your html would make no sense if read out on their own without their corresponding labels (like 'followers')
I hope that's helpful. Keep learning, and remember all this stuff takes time! ☺
1 - @rfilenkoPosted about 4 years ago
Hey Monica, nice try, but there some issues you can easily fix. First, add your your pattern images as background-image with css, this will fix positioning and overflow issues. And work on previous feedback.
Cheers, Roman
0
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