Certification Project - Build a Technical Documentation Page

HTML-CSS
1

I am having a problem with the last requirement for this project. That requirement is to use at least one media Query. I placed one at the end of my style sheet and cannot for the life of me, figure out why the editor is not accepting it. Any help would be greatly appreciated. 

* {
    scroll-behavior: smooth;
  }

html {
  font-size: 16px;
}

body {
  width: 100%;
  background-color: #faebeb;
  box-sizing: border-box;
}

/* HEADER SECTION */
header {
  font-size: 1.5rem;
  text-align: center;
  color: #a52a2a;
}

/* NAVIGATION SECTION */
#navbar {
  width: 20%;
  height: 100vh;
  position: fixed;
  box-sizing: border-box;
  border-right: 6px double #a52a2a;
}

ul {
  list-style-type: none;
}

#navbar
ul
li {
  padding-bottom: 1rem;
  text-align: center;
  border-top: 3px double #a52a2a;
  padding: 0.4rem;
}

ul
li
a {
  text-decoration: none;
}

/* MAIN SECTION */
#main-doc {
  width: 80%;
  float: right;
  clear: right;
  box-sizing: border-box;
}

.main-section {
  border-bottom: 3px double #a52a2a;
  padding: 1.25rem;
  box-sizing: border-box;
}

.main-section:last-child {
  border-bottom: transparent;
}

@media only screen and (min-width: 1024px) {
  html {
      font-size: 1.5rem;
    }
}
2

min-width value looks a bit high.
You could change the property for it instead.

3

try somthing else see if they work :

@media (max-width:1024px) {..}
1 Like
4

Please post your HTML as well.

The last test passed for me with nothing but the link to the CSS file in the HTML using the CSS you posted.

Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS

1 Like
5

Welcome to FCC Forum @bbaer68 !

The @media query is a bit tricky.

Here is an example for you.

@media screen and(max-width: 800px){
body{
background-color: orange;
}
}

I hope this helps you.

If not, here is a great article from FCC News category that explains @media queries.

1 Like
6

Link for the lesson :Build a Technical Documentation Page
Your media query is passing the test
Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS

7

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