Technical Documentation Page - Build a Technical Documentation Page

I am almost done with all of the challenges in the Technical Page, but I am having problem with passing the media query challenge. Even though I already added media query into the bottom of the CSS page, it doesn’t work. The weird thing is that I tried using Codepen but I passed all of the challenges.

My code so far (CSS):

  float: left;
  top: 0;
  width: 18%;
  position: fixed;
  height: 100%;
  overflow: auto;
  text-align: center;
}


.nav-link {
  text-decoration: none;
  color: black;
  font-family: 'helvetica';
  font-size: 18px;
  line-height: 60px;  
  padding-left: 0;
}


main{
  width: 70%;
  padding: 20px 0 0 300px;
}

p, i{
  font-size: 13pt;
  font-family: 'lato';
  line-height: 24px;
}

.lists li, ul li {
  font-size: 13pt;
  font-family: 'lato';
  line-height: 24px;
}

header {
  font-size: 15pt;
  font-family: 'helvetica';
  font-weight: bold;
  color: #0d47a1;
}

h2{
  font-family: 'helvetica';
  font-size: 14pt;
}

code {
  color: blue;
  font-size: 13pt;
}

table, tr, th, td
{
  border: 1px solid black; 
  border-collapse: collapse;
  text-align: center;
  font-family: 'lato';
}

@media only screen and (max-width: 600px) {
  body {
    width:100%;
  }
}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

With media queries I like to start simple.
Try just using (max-width: 600px) with a background colour, then test to see if its behaving as you expected it to.

Resize the screen, see if the colour changes.

Once you have that working, you can use it to resize elements, change font size, reposition your nav bar etc.

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