Stats preview card with grid and responsiveness (sort of)
Design comparison
Solution retrospective
Hello! This is definitely my worst attempt at a challenge, I don't really know what happened to be honest, it was a mix of frustration about box sizes, background image not showing and responsiveness adjusts. It turned out in the end, but the code is messy and I even gave up giving the proper blend mode to the image (I could've probably sorted that out, but I was really done with it). May I ask you how do you work with projects like this, where the target resolution is 1440p, but you have a 1080p monitor? How do you "simulate" the differences while coding? I can see that my proportions are right, but I'm on a different resolution device so how can I know what the difference will be on 2K? I saw a video about the "clamp" element, I will try to use it in the next responsive challenge, what do you think of it? Is it helpfull? Thanks for reading and happy coding!
Community feedback
- @alexatttPosted almost 3 years ago
I am not sure whether you have tried this...but :) You can simulate responsiveness of your web app and change dimensions of the possible screen, by right-clicking in your page, then "Inspect" and in the Devtools tab, which opens, on the top left you will see small phone/tablet icon, if you hover over it says Toggle device toolbar. Click it, then on your page, on top you will see a toolbar, choose dimensions: Responsive and then you can change your dimensions both manually and also below this toolbar you can click on different pre-defined dimensions, for example, Tablet - 768px, Laptop - 1024px, Laptop - 1440px etc. Despite the difficulties you faced, your solution looks nice anyway!
Marked as helpful1@GioltekPosted almost 3 years ago@alexattt Thank you Aleksandra for your feedback! Yeah I usually simulate responsiveness with the dev tools of Firefox/Chrome, but only for lesser resolutions, like when I want to adapt the css to fit a smartphone. Didn't know you can also simulate 1440px with it, so thanks for sharing! And thanks for the compliment too! :)
0
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