Design comparison
Solution retrospective
There wasn't a particular difficulty in this challenge. However, I couldn't use the desktop image for desktop screens and went with the mobile one since I couldn't scale the height of desktop image. I tried to use max-witdth: 100%; height: auto; but it didn't help. Will be glad to get your feedback.
Community feedback
- @AeteungPosted over 2 years ago
Hi Dan,
I am afraid that u used the inappropriate png. If u get the source file correctly, there is an image-hero-desktop.png for the desktop version. I have viewed your project, and I don't think u imported it, and u only used the image-hero-mobile.png in your HTML.
For me, this challenge is quite difficult tho. Both the mobile and desktop designs are quite different, and it is hard to make them decently. I suggest you use DevTools, which is already installed in all major browsers. It can render your website in different screen sizes as your elements go wrong when I test it in several screen sizes.
For me, the way I learn CSS is to care more about the details and try to achieve perfection. I hope that is helpful for u. Nice try tho. OuOb
1@Dan-KantPosted over 2 years ago@Aeteung Thanks a lot. I also tested it on several screens and found overflow issues. I am already updating the code. To come to the image, I initially imported the desktop image but after several attempts to adjust it properly failed, I just removed the link to the image from my html and went with the mobile one for desktop screens. Anyway, thanks for your review and feedback.
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