@avinno
Posted
Great job on this challenge!
I don't see any significant issues or have many suggestions except for:
- At 1299px wide and smaller, your project starts to show a white blank area at the very bottom of the page in you body. Setting "min-height: 100vh" on your <main> will fix this.
- If I am being critical, I might also suggest adding some padding or margins to your body/main respectively so the content area is not right against the top/bottom of the page on mobile version.
I like how you used the <picture> tag for image queries for desktop vs mobile.
I look forward to seeing more completed challenges from you!
Marked as helpful
@Gunner40
Posted
@thenihilistdev Thank you Aaron. I had put "height: 100vh" on the main element. I changed this to "min-height: 100vh" and it fixed the problem. I also added "padding-block: 5em" to the main element and this stopped the component from hugging the top and bottom of the screen on mobile devices, which looks much better. I also added a breakpoint at 1000px and changed some settings which improved the look of the component for screens of that size. Thanks for your help. Paul.
@avinno
Posted
@Gunner40 I am so glad to hear! Thanks for your reply to my feedback as well!
Always here to help. Great job on your initial project and good job on updates as well!
I look forward to seeing more of your project/challenge solutions!
