Technical Documentation Project - Feedback Needed Please

It was easy to get the project to pass the tests but after styling it the way I wanted it no longer passes the test.
Check out the project in mobile and desktop view.
What do you think? What can I do to improve this?
I am looking for constructive criticism. It is okay to be harsh.

Here it is Technical Documentation Project

1 Like

Looks good.

  1. Not sure I like having the max-width on the main element. I would either put it on a wrapper surrounding everything (like your article element container) and then center it or put it on the section elements and make the main element full with.

  2. I would move the (min-width: 750px) breakpoint up a bit, to like 860px or something. Right now at 750px the nav and main seem to take up an equal amount of space which looks a little off. You can also implement an intermediate step where you make the nav width smaller and adjust the left margin on the main to accommodate it.

  3. The hamburger icon is a little too big and too close to the left/top I think. I might also go with black and transparent for the lines. I would also add cursor: pointer to it.

This is still a bit big, but something like this.

.hamburger {
  top: 10px;
  left: 10px;
  width: 45px;
  height: 30px;
  position: absolute;
  display: inline-block;
  background: repeating-linear-gradient(var(--black), var(--black) 4px, #e6d69e00 4px, #e6d69e00 12px);
  cursor: pointer;
}

With that size and placment, you have to give the .navbar-menu a bit of negative margin to pull it up.

.navbar-menu {
  margin: 0;
  padding-left: 0;
  list-style-type: none;
  margin-top: -20px;
}
  1. I might bump up the font size a bit with something so text heavy.

Anyway, nice job.

2 Likes

@lasjorg Thank you for so much detailed feedback!

  1. Yes, the max-width makes the project stay on one side and looks lopsided. I have changed that.
  2. I made the hamburger menu button large because it is what will be used on smartphone screens. It shoulb be big enough for the persons finger. Some people have large fingers.

Thanks again for your time and input!

1 Like

No problem.

I still think the button looks a little odd, but I can appreciate the UX of making it user-friendly on small screens. I just think there might be better-looking solutions to that.

  1. Making the icon part of it smaller but giving it a larger transparent container width padding so it has a bigger hit area.

  2. Same as 1 but give it a border to help show the larger area.

  3. Making it a block and giving it the text of Menu.

Just to show what I mean.
https://codepen.io/anon/pen/NmZYwX

2 Likes

@lasjorg You are correct my brother. The button does look odd. I was trying to make something a little different the the tipical hamburger menu that we see so often. I have changed it by adding margin to move it away from the edges.

Thank you again for taking the time to view my project.

1 Like