Tech Doc feedback, please

Code Feedback
1

Link: https://codepen.io/homtanks/pen/PrBONY

General feedback welcome! And if someone could figure out why my link in the footer isn’t working, I would appreciate it! Maybe I’m just tired and need to go to bed, but I’ve messed with it a bit and can’t figure out what is wrong.

Thanks!

2

It’s really good! This isn’t really “Tech” Doc, but it works.

3

It is the negative z-index on main that is causing it. I don’t really see a need for it anyway.

  1. Your nav is covering up the content a larger screen sizes.

  2. I would personally remove the list-style on the nav when the layout is stacked.

  3. See if you can make the links land correctly on the stacked layout (info)

4

Not a ‘Tech’ doc page but pretty good. I found a few problems:

  1. When your page width is large (above 1410px) the menu starts to cover the main content
  2. When your navbar media query takes effect, your links gain bullet points. I presume this isn’t intentional.

Other than that, it seems good.

5

@lasjorg - Thank you! The z-index was a remnant of earlier designs and I just forgot about it.

  1. Is there a way for me to view how it would look on screens bigger than mine?
  2. Yeah, I can see that.
  3. This is something I’ve looked at before but haven’t tried implementing yet. I guess now’s the time.

@paladinvaan2018

  1. How can I see this to fix it? The largest size I can see is 1280px.
  2. It was intentional because I thought without them the links became a bit indistinguishable from one another. But I agree that it looks better without.

@paladinvaan2018, @RyanHuang06 - Yeah, the content isn’t technically…technical, but I wanted to do something a bit different. Considering I’m an English teacher I thought it was appropriate. And it still fulfills the needs of the project.

Thank you all for the feedback, I really appreciate it!

6

You would have to have a pretty small screen not to see the issue.

You can try this, in Chrome open the dev tools and use the Device Mode. Now make sure the Device Viewport Mode is set to Responsive. Then Zoom the viewport out to 50% and drag the Viewport out as far as you can (the Viewport window has handles on the side you can drag).

7

Maaaaan…that was a bit of a pain. It seems like there has to be an easier way to do that. Of course, I could have just gone about it the wrong way. But, I think I have it working now, and I learned some stuff along the way, so it works out in the end!

I figured it out! I’ve been using responsive view in Firefox and I just didn’t mess around with it enough. But I set a max-width to the navbar so it shouldn’t cover anymore on larger screens.

8

Well it would have been simpler to just use the .main-section class for the scroll fix selector instead of grouping all the section ids.

But it is made a bit more complicated because the header is changing it’s height so much depending on the viewport width.

In any case, the result is great, you did very well.

1 Like
9

See…I knew I was doing something to make it more complicated. But thanks for all your help! I think it’s ready to submit.