Responsive Web Design Projects - Build a Technical Documentation Page

HTML-CSS
1

I can’t get my media query to work. It seems like the syntax is correct – I’ve even copy+pasted the media query from another website but the console doesn’t recognize my max-width pixel input.

html, body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5;
  min-width: 290px;
}

header {
color: black;
margin: 10px;
text-align: center;
font-size: 1.8em;
}

#main-doc header {
  text-align: left;
  margin: 0px;

li {
  margin: 15px 0 0 20px;
}

.indent-list {
  margin-left: 5%;
}

#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: rgba(0, 22, 22, 0.4);
}

#navbar a {
display: block;
padding: 10px 30px;
color: #4d4e53;
text-decoration: none;
cursor: pointer;
}

.nav-link {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  padding-top: 10px;
}

.nav-link a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: black;
  display: block;
  transition: 0.3s;
}

main {
  margin-left: 200px;
  padding: 20px;
}

#navbar ul {
height: 88%;
padding: 0;
overflow-y: auto;
overflow-x: hidden;
}

body {
fbc-blue-60: #0060df;
  --fbc-blue-70: #003eaa;
  --fbc-gray-20: #ededf0;
  --fbc-light-gray: #F0F0F4;
  --fbc-white: #ffffff;
  --fbc-transition: all .15s cubic-bezier(.07,.95,0,1);
  --fbc-borders: 1px solid #ededf0;
  --fbc-primary-text: #15141A;
  --fbc-secondary-text: #5B5B66;
  --fbc-font-size: 13px;
}

section article {
  color: #4d4e53;
  font-size: 0.96em;
}

@media screen and (max-width: 600px) {
  #navbar ul {
    border: 1px solid;
    height: 207px;
  }

  #navbar {
    background-color: white;
    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 275px;
    border: none;
    z-index: 1;
    border-bottom: 2px solid;
  }

  #main-doc {
    position: relative;
    margin-left: 0px;
    margin-top: 270px;
  }
}

  code {
    margin-left: -20px;
    width: 100%;
    padding: 15px;
    padding-left: 10px;
    padding-right: 45px;
    min-width: 233px;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/112.0

Challenge: Responsive Web Design Projects - Build a Technical Documentation Page

Link to the challenge:

2

its possible there are other issues with your CSS preventing it from correctly reading the media queries

you have a } missing
between:

#main-doc header {
  text-align: left;
  margin: 0px;

li {
  margin: 15px 0 0 20px;
}

you have an extra } at the end of your code

I hope this helps :smiley:

3

Thanks. I added that squiggly parenthesis and it messed up the display for my navbar, which I am trying to figure out, but did make the media query go through properly. So I passed the project but it still looks bad and I need to fix it somehow.

1 Like
4

If it messed up your navbar its likely the styles beneath the } getting read and applied.

It might be a good time for you to look into getting a Code Editor.
Seems you know enough now that you could benefit from one without it hindering your learning.

I use VS Code which is how I found your syntax error, it highlights incorrect syntax.
I’ve also used Brackets, which has a preview similar to freeCodeCamp.

1 Like
5

I’ll give it a try, thanks!

Media queries seem to be my current bugbear – am currently struggling with the same issue with the media query on my “Build A Magazine” project.

6

I had the same problem, sometimes it takes a while for things to really stick.

I recommend giving your brain more data :smiley:
Find as many sources about the subject as you can.
After each one try to apply the new knowledge, even if you fail multiple times to get it right, your still learning and it does add up.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.