Assist @media for Technical Documentation Project

Assist @media for Technical Documentation Project
0
#1

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?

#2

Can you post a link to the project?

#3

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

#4

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
#5

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