Help with positioning in my tech doc

When the media query is active the main section isn’t positioned right and I’m having trouble figuring out how to fix it. I don’t think I want the content to scroll behind the nav bar and when the content is scrolled to the top there is a whole bunch of empty space I also don’t want. How can I fix these issues?

delete article{…} from media query

When the media query is active the main section isn’t positioned right and I’m having trouble figuring out how to fix it.

@media (max-width: 860px){
    article {
       grid-template-areas: "navbar" "content"; /* delete this line */
    }
}
1 Like

Thanks. The result is exactly what I was trying to do.

  1. Your calc function is broken, there has to be a space before and after the operator

Broken:
grid-template-rows: 260px calc(80vh-260px);
Works:
grid-template-rows: 260px calc(80vh - 260px);

  1. Fixing that will however break your layout. As it wasn’t doing anything you wanted you can just remove it.

  2. You have invalid HTML, run your HTML through a validator.

A) You have a bunch of empty <li> elements, and their parent containers are not valid (list items needs a list as their parent).
B) The element main cannot be a descendant of the article element.
C) You have stray invalid </tdd> tags and a missing closing span.

You have:
<tr class="grayTableRow"><td>car.color = blue</td><td>car.stop()</td></tdd></tr>

Should be
<tr class="grayTableRow"><td>car.color = blue</td><td>car.stop()</td></tr>

You have
<span class="greenText">// Declares z as a Boolean object

Should be
<span class="greenText">// Declares z as a Boolean object</span>

Very nicely done. I really like how you handled the navigation and content areas.

Hmm, some of my text disappeared on me in my post.

I did actually want to say I like the page and I really like your code boxes and the colors. Also, the car analogy isn’t bad. Well done.