Assist @media for Technical Documentation Project

On the last section of the Technical Documentation Project, the requirement is

1. On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. You may need to enlarge the viewport or zoom out to ensure the navbar doesn’t scroll with the page content.

@media screen and (max-width: 660px) {
  #nav-container {float:none; height:200px; width:100%;}
  #main-container {float:none; width:100%;}
  #introduction {margin-top:210px;}
}

getting this error message:
Left of bounding rectangle is not correct.: expected 8 to be below -658.5
AssertionError: Left of bounding rectangle is not correct.: expected 8 to be below -658.5

can someone help me understand what it means?

Can you post a link to the project?

https://codepen.io/KristanM/pen/NmMVWr

It is because it looks at the #navbar element but you have the styles on #nav-container (the #navbar container element collapses because it’s content the #navbar is position fixed).

If you change the #nav-container selector to #navbar it passes the test. You will have to do it in your media query as well to make it work like it does now.

Edit: The CSS just to be clear

#navbar {
  float:left;
  width:40%;
  height:100%;
  overflow:scroll;
  position:fixed;
  top: 0;
  left:0;
  background: #866e91;
}

@media screen and (max-width: 768px) {
  #navbar {float:none; height:200px; width:100%}
}
1 Like

Awesome. Thank you so much for the help. :slight_smile: