Documentation Page-question

HTML-CSS
1

i tried to make the nav goes above the main-doc by using @media. something went wrong. can you please tell me what`s wrong?

https://codepen.io/Guysharon2202/pen/pmqEwX

2
  1. I’m not sure if you meant to use the grid shorthand but the syntax for it is not correct. I will say I never really use it and find it can get confusing and hard to read.

You have:

.main-body {
  display: grid;
  grid-template-columns: minmax(300px, auto) 1fr;
  grid: "navbar main-doc";
}

With the grid shorthand it should be:

.main-body {
  display: grid;
  grid: "navbar main-doc" / minmax(300px, auto) 1fr;
}

Or if just using grid-template-columns and grid-template-area should be:

.main-body {
  display: grid;
  grid-template-columns: minmax(300px, auto) 1fr;
  grid-template-area: "navbar main-doc";
}
  1. The media query has incorrect syntax.

You have:

@media screen and(max-width: 750px){
  {.main-body
  grid-template-columns: 1fr;
    grid-template-areas:"navbar" "main-doc";}
  #navbar{
    position:inherit;
  }
}

Should be:

@media screen and (max-width: 750px) {
  .main-body {
    grid-template-columns: 1fr;
    grid-template-areas: "navbar" "main-doc";
  }
  #navbar {
    position: inherit;
  }
}