Design comparison
Solution retrospective
Was having difficulty making it more responsive. I was able to use mediaquery to set breakingpoints, however before the page is shrunk down to the breaking point, the card was already half off-screen due to lack of responsivity. Any suggestions?
Community feedback
- @alexander215Posted over 2 years ago
Good work! You should be able to fix this up with a quick change. Your media query is set to change at a width of 375px. Try changing that to the point when the wide version goes off the screen (maybe around 1100px). When sizing the media queries, you generally want them to be at the place where one layout starts to look bad. So it usually comes from the larger one, not the point where you've hit the max size on the smaller.
In a perfect world, there would be a tablet-sized design to go in between the two, but I believe this challenge only provides these two.
Marked as helpful1@yuany2036Posted over 2 years ago@alexander215 Thanks for the recommendation! I thought about doing it before, but thought it would have looked really awkward with such a narrow card when there was still quite a lot of space available. But I guess without a format provided for tablet (or whatever form factor that would go in-between), this is probably the best solution. Cheers!
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