Design comparison
Solution retrospective
This is a redo of this challenge. I combined the two desktop images to create the single image for tablet and mobile. I also changed the button text colors and hover states to pass accessibility contrast checks.
What challenges did you encounter, and how did you overcome them?I wasn't able to get the images to overflow the page view. I will need to spend more time on this to figure out how to do it. It may be because I used Grid for the Hero section.
What specific areas of your project would you like help with?If anyone has info on how to get the images to overflow the page, it would be appreciated.
Community feedback
- @RalphPastel972Posted 7 months ago
Hey,
Combining the two desktop images to create the single image for tablet and mobile is really clever. Well done.
That being said, there are 3 design difficulties that you skipped and I think you will learn a lot by trying to face them:
- The "image-hero" images are always cut on the left or right side of the banner. And that is the case for all screen sizes (desktop, tablet and mobile). Your solution does not reflect that.
- You also missed the fact that the footer behaves totally differently on large screen: the elements are not stacked anymore, but are near each other.
- The image in your footer does not adapt to screen size. It's not the same image for mobile, tablet or computer.
Good luck
0@brodiewebdtPosted 7 months ago@RalphPastel972
I had a problem getting that to work with the hero images. I missed the footer image issues. I will look into that. Thanks. David Edit: There was a typo in my media query, that is why the footer content was stacked at all resolutions.
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