@kenreibman
Posted
Looks great on desktop!
I did come across a few issues when I switched over to mobile.
You have two main wrapper divs which are .container and .content doing the same thing.
Get rid of your absolute positioning. You should almost never position: absolute a wrapper div. Because of that, your entire content in mobile view is pushed down.
If you want to center content on your screen, I recommend doing:
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Your breaking point for mobile view is slightly too late, making your content cut off around 1100px.
I would also recommend using correct HTML Semantic Elements for your future projects. I realized you used the nav tag as an entire main content for your project. I would use nav strictly for navigation links. If you change nav to main it will be semantically correct, and would get rid of that accessibility flag.
You also have a ul nested in a span tag, which is not the best practice either. I believe instead of using a span just changing it to a div would have the same results without having any HTML validation issues.
I hope this helped, good luck!
Marked as helpful
