Design comparison
Solution retrospective
The hardest thing was responsive width, mixing min and max width. I am unsure of the minimize responsiveness and could not get the right fonts to work.
Community feedback
- @correlucasPosted over 2 years ago
Hello Nomatter, congratulations for your solution!
To have your component optimized for mobile and desktop, it's better you use the two different images given and switch them when the component gets mobile size.
Let me say you something that matter and is not gone yet. A quick way to do it is by using
<picture>
to wrap both images and set inside the html when the images should change between devices.Anyway, congratulations for your solution, seems really nice and clean!
Marked as helpful2 - @Spirit-Posted over 2 years ago
Congratulations for your solution!
I would suggest loading mobile version of image on smaller screens. Image itself smaller than desktop one and is easier to fit it in design.
As for fonts: the link you loaded is the whole repository of said fonts. On that page you can select which styles you are going to use and page will generate whole block of link tags you need to get it work on your site. You can find it on right panel after selecting one of the fonts styles.
Marked as helpful1
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