Tell us what’s happening:
I’m getting the following error when testing my code in CodePen:
“On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left side of the screen and should always be visible to the user.
Left of bounding rectangle is not correct.: expected 0 to be below -610
AssertionError: Left of bounding rectangle is not correct.: expected 0 to be below -610”
Your code so far
My #navbar code (I’m using PostCSS, as well as B.E.M. naming conventions, then compiling it into my styles.css file. I’m using the compiled file for testing on CodePen.):
#navbar,
.nav-bar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #333;
}
#navbar__header, .nav-bar__header {
padding: 30px 0;
color: #f2f2f2;
font-size: 1.5em;
}
#navbar__nav-link, .nav-bar__nav-link {
float: left;
font-size: 1.2em;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#navbar__nav-dropdown, .nav-bar__nav-dropdown {
float: left;
overflow: hidden;
margin-bottom: 20px;
}
#navbar__nav-dropdown-button, .nav-bar__nav-dropdown-button {
font-size: 1.2em;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: #FF5733;
font-family: inherit;
margin: 0;
}
#navbar__nav-link:hover,
#navbar__nav-dropdown-button:hover,
.nav-bar__nav-link:hover,
.nav-bar__nav-dropdown-button:hover {
background-color: #ddd;
color: black;
}
#navbar__nav-dropdown-content, .nav-bar__nav-dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
-webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
#navbar__nav-dropdown-content a,.nav-bar__nav-dropdown-content a{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
#navbar__nav-dropdown-content a:hover, .nav-bar__nav-dropdown-content a:hover {
background-color: #ddd;
}
#navbar__nav-dropdown:hover #navbar__nav-dropdown-content, .nav-bar__nav-dropdown:hover .nav-bar__nav-dropdown-content {
display: block;
}
/* Media query for Medium to Large Screens */
@media (min-width: 850px) {
#navbar__nav-dropdown-button, .nav-bar__nav-dropdown-button {
display: none;
}
#navbar__nav-dropdown-content, .nav-bar__nav-dropdown-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
margin: 20px 0 0 -50%;
position: fixed;
}
#navbar__nav-dropdown-content a, .nav-bar__nav-dropdown-content a {
text-align: center;
margin: 40px 0;
}
}
Your browser information:
The latest version of Chrome.
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
.
Link to the challenge:
Learn to code. Build projects. Earn certifications.Since 2015, 40,000 graduates have gotten jobs at tech companies including Google, Apple, Amazon, and Microsoft.
pyremell:
#navbar , .nav-bar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #333 ; }
pyremell:
Tell us what’s happening:
I’m getting the following error when testing my code in CodePen:
“On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left side of the screen and should always be visible to the user.
Left of bounding rectangle is not correct.: expected 0 to be below -610
AssertionError: Left of bounding rectangle is not correct.: expected 0 to be below -610”
Your code so far
My #navbar code (I’m using PostCSS, as well as B.E.M. naming conventions, then compiling it into my styles.css file. I’m using the compiled file for testing on CodePen.):
#navbar,
.nav-bar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #333;
}
#navbar__header, .nav-bar__header {
padding: 30px 0;
color: #f2f2f2;
font-size: 1.5em;
}
#navbar__nav-link, .nav-bar__nav-link {
float: left;
font-size: 1.2em;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#navbar__nav-dropdown, .nav-bar__nav-dropdown {
float: left;
overflow: hidden;
margin-bottom: 20px;
}
#navbar__nav-dropdown-button, .nav-bar__nav-dropdown-button {
font-size: 1.2em;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: #FF5733;
font-family: inherit;
margin: 0;
}
#navbar__nav-link:hover,
#navbar__nav-dropdown-button:hover,
.nav-bar__nav-link:hover,
.nav-bar__nav-dropdown-button:hover {
background-color: #ddd;
color: black;
}
#navbar__nav-dropdown-content, .nav-bar__nav-dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
-webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
#navbar__nav-dropdown-content a,.nav-bar__nav-dropdown-content a{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
#navbar__nav-dropdown-content a:hover, .nav-bar__nav-dropdown-content a:hover {
background-color: #ddd;
}
#navbar__nav-dropdown:hover #navbar__nav-dropdown-content, .nav-bar__nav-dropdown:hover .nav-bar__nav-dropdown-content {
display: block;
}
/* Media query for Medium to Large Screens */
@media (min-width: 850px) {
#navbar__nav-dropdown-button, .nav-bar__nav-dropdown-button {
display: none;
}
#navbar__nav-dropdown-content, .nav-bar__nav-dropdown-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
margin: 20px 0 0 -50%;
position: fixed;
}
#navbar__nav-dropdown-content a, .nav-bar__nav-dropdown-content a {
text-align: center;
margin: 40px 0;
}
}
Your browser information:
The latest version of Chrome.
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
.
Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page
This is because your navbar is occupying width:100%. Change it to for instance 30% and align it towards left…this should pass the test
1 Like