Assessment for Media Queries and Responsive Design Task

I’d appreciate an assessment for the Media Queries and Responsive Design task. It’s the optional task that comes at the end of those respective sections.

This is my code on GitHub and this is my code on CodePen. All my added CSS code is below my comment.

I struggled a lot with this project. I had to go back and re-read/re-do the flexbox & grid lessons. I eventually got it to look the same as the project, but I’m not sure if I used best practice or just “hacked” my way to the end. I just fiddled around with my code until it turned out. In particular, the navbar gave me a lot of trouble.

Thank you!

1 Like

Hi @dylan.gonzalez, welcome to the community, and apologies for taking so long to reply.

This code is looking really cool. You have made great use of modern layout techniques to make this layout work.

The only thing I noticed is that the nav items are at the bottom of the header, rather than centered. To fix this, you could change the CSS set on the nav ul from align-items: flex-end; to align-items: center;

But apart from that, great work!

1 Like

Thank you, @chrisdavidmills! I really appreciate the feedback. I’m glad that it was mostly done correctly – I will keep the align-items in mind for next time. Thanks!

I got stumped on this one, frustratingly enough! Thanks for posting, Dylan!