hi Boots. Great solution! Looks very good, I also like your additions with framer motion. Just one thing which sticks out to me is de fact your header image doesn't scale and sticks left on desktop size. This can be solved with either implementating the image as a background-image for the container and let is scale with background-size: cover;. Or auto-fit it with object-fit properties.
Coincidentally I was just planning on doing the same challenge, so I didn't check your codebase. Don't want to "cheat" by seeing someone else code beforehand. ;)
Marked as helpful
@adityaphasu
Posted
@EdwinSch Oh! I am actually already using it as a background image and using cover , I think the lg:bg-contain which makes it contained at the larger screen sizes might be the problem xD . I'll remove the class and see if it fixes it. Thanks for pointing out though!
@adityaphasu yes contain means it will keep it's original sizes and not scale. cover will figure out how to scale the image within given dimensions of the parent. Although the trade-off being some parts of your image will be sort of cropped so it can fit. Glad to help :)
@adityaphasu
Posted
@EdwinSch omg ahahahaha ! I just tested this on different desktop sizes and I was like it seems fine to me but didn't realize this was happening on screens beyond 1440px which I didn't test on while building the project and also contain somehow didn't change anything while on 1440px so I missed it completely as everything seemed fine š
@adityaphasu
Posted
@EdwinSch Removed the class and it actually looks quite the same on bigger screen sizes! Thanks again for letting me know about this š
