Design comparison
Solution retrospective
The challenge is not fully complete as of yet.
I changed the height of the header to 100vh which is why the image isn't the same as I thought it gave the user more of an inclination to scroll down to see the rest of the content.
I still have some fixes to implement that I am aware of: JS to make the mobile navigation work. JS to make the header sticky. (Desktop/ Tablet) and an issue where the grid is responsive but one of the divs is a different size @ 50em/ 36em.
I would really appreciate feedback on these issues and potentially how to fix/ implement them!
Community feedback
- @luismadfPosted about 3 years ago
Hi Matt,
I'm currently working on this challenge right now. I want to help you with the following questions:
"JS to make the header sticky" This can be easy solve with a "position: sticky" and it will consume way less resources.
"and an issue where the grid is responsive but one of the divs is a different size @ 50em/ 36em": I personally love to use css grid so I just gave them a grid-template-row: 3fr (for the text div) and 2fr (for the picture one).
I hope it helps and great job! Greetings!
Marked as helpful0@MattJones0813Posted about 3 years ago@luismadf
Hi Luis,
I wasn't aware of that property, thanks for pointing that out for me!
Brilliant! I shall add these changes when I add the JS for the mobile nav :D
Many thanks!
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