Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

Former doc trying to learn coding over the next few months. The basics of html/css seem pretty intuitive but I’m struggling with positioning various elements relative to each other.

On this page I’m trying to use a media rule to move the navbar above the page content and centered when the screen shrinks. I’ve tried block display, messing around with positions, etc with no luck. Any suggestions?

I’d also appreciate any general tips as I’m sure I could be more precise with my html/css.

Thanks!

Your code so far

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=display-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Blood Pressure Measurement</title>
  </head>
  <body>
    <main id="main-doc">
      <div class="navbar">
        <nav id="navbar">
          <header class="toc">Table of Contents</header>
          <hr>
          <ul>
            <li><a href="#why_measure_blood_pressure?" class="nav-link">Why measure blood pressure?</a></li>
            <hr>
            <li><a href="#when_should_i_take_my_blood_pressure?" class="nav-link">When should I take my blood pressure?</a></li>
            <hr>
            <li><a href="#how_does_blood_pressure_measurement_work?" class="nav-link">How does blood pressure measurement work?</a></li>
            <hr>
            <li><a href="#how_do_i_get_an_accurate_blood_pressure_measurement?" class="nav-link">How do I get an accurate blood pressure measurement?</a></li>
            <hr>
            <li><a href="#how_do_i_interpret_the_results?" class="nav-link">How do I interpret the results?</a></li>
          </ul>
        </nav>
      </div>
      <div class="sections">
      <h1>How to Measure Blood Pressure</h1>
      <section class="main-section" id="why_measure_blood_pressure?">
        <header>Why measure blood pressure?</header>
        <p>Blood pressure measurement is a simple test to determine if your blood pressure is in the normal range. Blood pressure can be measured at home, in the doctor's office, or in certain pharmacies with blood pressure machines.</p>
        <p>Measuring blood pressure is an important component of general health screening. If elevated blood pressure is detected early, it can be addressed with your doctor to reduce risk for conditions such as heart disease and stroke.
      <section class="main-section" id="when_should_i_take_my_blood_pressure?">
        <header>When should I take my blood pressure?</header>
        <p>Blood pressure can be measured daily. It is best to take your blood pressure measurement at the same time each day for consistency. Make sure to log your results every day for at least 2 weeks after starting new blood pressure medication.
          <p>Taking and logging your blood pressure in the week prior to your doctor's visit can be helpful. While your doctor will likely measure your blood pressure at the beginning of your visit, a single value is not as helpful as a recent trend. 
        <h3>Is home blood pressure measurement reliable?</h3>
          <p>The short answer is...yes! Believe it or not, home blood pressure measurement is the gold standard. Many patients can experience what is called "white coat hypertension" which is high blood pressure from the stress of being at the doctor's office. Home measurements taken at the same time every day tend to be more reflective of your normal, everyday blood pressure. 
      </section>
      <section class="main-section" id="how_does_blood_pressure_measurement_work?">
        <header>How does blood pressure measurement work?</header>
        <p>Blood pressure is measured by a cuff that connects to a pressure gauge. The cuff is wraped around the upper arm (above the elbow) and inflated to temporarily stop blood flow in the arm. The pressure may feel uncomfortable, but this is temporary.
        <p>The cuff is gradually loosened allowing blood flow to return in the measured artery. During this phase, the maximum and minimum pressure is determined and recorded as one number over the other, such as 120/80 mmHg. </p>
      </section>
      <section class="main-section" id="how_do_i_get_an_accurate_blood_pressure_measurement?">
        <header>How do I get an accurate blood pressure measurement?</header>
          <p>There are a few things to consider when measuring blood pressure to ensure the most accurate results:</p>
          <ul>
            <li>Avoid anything that can raise your blood pressure within 30 minutes of measurement including nicotine products, caffeine, and exercise.</</li>
            <li>Sit at rest for at least 5 minutes before taking your measurement.</li>
            <li>Sit upright in a chair with feel on the floor and arm resting comfortable on the table.</li>
            <li>Make sure to empty your bladder beforehand.</li>
            <li>Avoid using a cuff that is too small as this can artificially inflate your measurement.</li>
            <li>Wrap the cuff around your upper arm just above your elbow. Either arm is fine.</li>
            <li>It is best to wrap the cuff directly around the arm without any clothing in between the cuff and your skin</li>
          </ul>
      </section>
      <section class="main-section" id="how_do_i_interpret_the_results?">
        <header>How do I interpret the results?</header>
          <p>You can use the following ranges for your reference:</p>
          <ul>
            <li><code>Normal</code> is 120/80 mmHg or lower.</li>
            <li><code>Elevated</code> is 120 to 129/80 mmHg or lower.</li>
            <li><code>Stage 1</code> high blood pressure is 130 to 139 mmHg or 80 to 89 mmHg.</li>
            <li><code>Stage 2</code> high blood pressure is 140/90 mmHg or higher for either number.</li>
            <li><code>Hypertensive crisis</code> is higher than 180 mmHg and/or higher than 120 mmHg.</li>
          </ul>
          <p>These are general guidelines and actual values may vary by age and medical condition. If your blood pressure is consistently higher than your usual range, you should notify your doctor and schedule an appointment. If you meet criteria for hypertensive crisis, you should head to the nearest emergency room.
      </section>
      </div>
    </main>
  </body>
</html>


h1 {
  padding-bottom: 40px;
}

@media screen and (min-width: 768px) {
  .navbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.main-section header {
  font-size: 28px;
  font-weight: bold;
}

.navbar {
  height: 400px; 
  width: 250px;
  position: fixed;
  left: 0;
  background-color: white;
  margin-left: 10px;
  padding-top: 20px;
  padding-bottom: 40px;
  border: 1px solid black;
}

.toc {
  text-align: center;
  font-size: 24px;
}

.sections {
  padding-left: 280px;
  max-width: 800px;
  font-size: 18px;
  margin-right: 0
}

nav li {
  padding-bottom: 10px;
  font-size: 20px;
}

section li {
  padding-bottom: 10px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

Hi there!
To move the navbar above and center it on smaller screens, you can use a media query (max-width: 768px) to set the navbar’s position to absolute, center it horizontally (left: 50%; transform: translateX(-50%)), and ensure the page content starts below it by adding margin-top to .sections. For larger screens (min-width: 768px), the navbar remains fixed to the left with its original styles.

3

Thank you for the help. I tried making the changes you suggested but am not getting the desired result. When I open the preview window and shrink the width the left half of the navbar now gets cut off and a large gap appears between the navbar and the main content. My media rule currently reads:

@media (max-width: 768px) {
.navbar {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

.sections {
margin-top: 10px;
}
}

Did I implement those changes incorrectly? Thanks again.

4

Hi there!

Try to update your media query to use position: relative instead of absolute for the navbar. Center it using margin: 0 auto, and ensure the navbar stays in the document flow.