Design comparison
SolutionDesign
Solution retrospective
I found myself in the problem that the screen sizes indicated that I should create the screens for Mobile: 375px & Desktop: 1440px, but those differentiations in the media queries simpky did not made the job for me, it made some of the cards look too crammed, so I ended up cutting the screens at 672px, which it seems like it worked much better.
I was not able to make the buttons align in every screen size, I'm not particularly sure what to do about this. Screenshot.
Thank you so much!
Community feedback
- @tea-scriptsPosted over 2 years ago
Great work completing the challenge. Some points:
- Ideally each of these cards should be wrapped in
articleinstead of asectionso you might want to take a look at that. To learn more about HTML Semantic Tags click here. - Try switching the
displayproperty toinline-blockorblock. This should help to align the buttons on every screen size. - Nice work making the switch at 672px in real world cases you'd be designing for Mobile, Tablet and Desktop Layouts.
- For the accessibility issue, you can wrap your entire markup in the
maintag including the<div class="attribution">.
Great effort so far mate. Happy coding 👍!
Marked as helpful0 - Ideally each of these cards should be wrapped in
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