Product Landing Page - Build a Product Landing Page

Thanks again for your help. This code passes the test and validates. This question goes towards the function.
When first loaded, everything is visible. When using the page navigation links, the top portion of a section is hidden under the header bar.
How may I fix this so that the selected section is completely visible?
Thank you!

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!-- Product Landing Page -->
<!-- landing-01 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Landing Page</title>
<link rel="stylesheet" href="./styles-01b.css"> 
  </head>
  <body>
    <section id="page-wrapper"><div id="Home"></div>

      <header id="header">
        <div id="logo">
          <img id="header-img" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.ULZgSYFFmL20g_YxZGJZ1wHaG0%26pid%3DApi&f=1&ipt=9938aff657a4a653691a8bf01f5cef746e4d2e90cd8517bf7dc10c2be441baab&ipo=images" alt="Happy Book" height = "78" width = "78">
        </div>

        <h1>Hodgepodge of Miscellany!</h1>

        <nav id="nav-bar">
          <ul class="nav_wrapper">
            <li class="nav-li">
              <a class="nav-link" href="#Home">Home</a>
            </li> 
            <li class="nav-li">
              <a class="nav-link" href="#Development">Development</a>
            </li> 
            <li class="nav-li">
              <a class="nav-link" href="#Shipping">Shipping</a>
            </li> 
            <li class="nav-li">
              <a class="nav-link" href="#Price">Price</a>
            </li> 
            <li class="nav-li">
              <a class="nav-link" href="#Contact">Contact</a>
            </li> 
          </ul>
        </nav>
      </header>
      
      <section id="main"><h6>&nbsp;</h6>
        <hr>
        <section id="Intro">
          <h2>Answers, Memories, and More</h2>
          <!-- Top of the page's body -->
          <!-- wrap text ==> toWard the required video -->
          <div id="video-box">
            <p>
              <IFRAME id="video" SRC="https://www.youtube.com/embed/qFZKK7K52uQ" title="Relax Music for Stress Relief"     style="overflow:auto; border-style:solid; border-width:2px; border-color:#000000;
              float: right;">
              </IFRAME>
              Albert Einstein said something similar to this: The opportunity to learn liberates the spirit and provides joy when it profits the community to which you belong. <br><br>
              <b>Parts Without a Whole</b><br><br>
              This page is being built with two purposes in mind. The first is to meet the requirements of freecodecamp.com to "Build a Product Landing Page". The second is to build a page that may be incorporated into my Hodgepodge. This section will disappear when this is incorporated into my pages.
              <br>
              <br><sup>Video from Mindful Kids, MindfulKidsCommunity.org, pioneering resources for social, emotional, spiritual, and energetic learning for children of all ages.  </sup>
            </p>
          </div>
        </section>

        <section id="Introduction" >
          <h3>Introduction</h3>
          <p>This site was built to answer many questions from several people. Here you may learn how it came together. Some of this information may be old. Old as in outdated. Old as in not new to you. Moreover, old as in I had fallen behind the changes in technogy and had to learn again.</p>
        </section>  

        <section class="container"><h6>&nbsp;</h6>
          <section id="Development">
            <div class="grid">
              <div class="icon">
                <img class="x" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.0QfNCt1VRz2ipTn4565v5AHaHX%26pid%3DApi&f=1&ipt=2828929f593418a39ffc8219f01272bddd66aaf01ef894aaa7b84eb1a1837d4b&ipo=images" style="width: 60px; height: 60px;" alt="image depicting a circuit on Graphene"> 
              </div>    
              <div class="desc">
                <h3>Graphene and Tissue Paper </h3>
                <p>Penn State researchers have devoleped a device powered by the movements of the person wearing it. The energy is stored as electrical energy in micro-super capacitors. They designed a wearable sensor for detecting blood pressure and movement using a small skin patch made of tissue paper. The paper was dipped into conductive material  to become a sensor that sticks to the skin. </p>
              </div>
            </div>
          </section>

          <section id="Shipping">
            <div class="grid">
              <div class="icon">
                <img class="x" src="https://cdn0.iconfinder.com/data/icons/delivery-46/48/Delivery_expand-06-512.png" style="width: 60px; height: 60px;" alt="A messenger runnoing with a box"> 
              </div>    
              <div class="desc">
                <h3>Fast, Free Shipping </h3>
                <p>To help save the earth, we only use recycled eletrons. With these, it takes a few microseconds to prepare the product. Once assembeled, we send it out to you at a speed of  186,000 miles per second.  Whe they arrive, it may be advisable to stand to one side of your display. I don't want anyone to get hurt. It is a wonder that the electrons are able to stay within the circuts as they round so many corners.</p>
              </div>
            </div>
          </section>

          <section id="Price">
            <div class="grid">
              <div class="icon">
                <img class="x" src="https://cdn2.iconfinder.com/data/icons/whcompare-servers-web-hosting/50/free-trial-1024.png" style="width: 60px; height: 60px;" alt="A pricetag saying Free"> 
              </div>    
              <div class="desc">
                <h3>One Price Fits All </h3>
                <p><img src="https://cdn.vectorstock.com/i/1000x1000/71/55/special-offer-10-off-label-or-sticker-vector-20547155.webp" alt="ten percent off" style="width: 60px; height: 60px; float: right;"> Bring your own container. Like a Dollar Store, we charge the same for every item. <b>Guarentee:</b> We are so confident that our products are better than any other simular items on the market that well give you <b>TEN TIMES your MONEY BACK!</b> This special offer expires at midnight yesterday.</p>
              </div>
            </div>
          </section>
        </section>
        <hr>

        <section class="grid-row"><h6>&nbsp;</h6>
          <section class="items">
            <div id="off-bit" class="item"> 
              <div class="item-header">Off Bit<br>&nbsp;<br>&nbsp; </div>
              <h2 class="product-h2">$0.00</h2>
              <div class="item-desc">
                When not set, represents zero
              </div>
            </div>
          </section>

          <section class="items">
            <div id="on-bit" class="item"> 
              <div class="item-header">On Bit <br>&nbsp;<br>&nbsp; </div>
              <h2 class="product-h2">0&cent;</h2>
              <div class="item-desc">
                Indicates "one" when on
              </div>
            </div>      
          </section>

          <section class="items">
            <div id="empty-bite" class="item">
              <div class="item-header">Empty Byte<br>&nbsp;<br>&nbsp; </div>
              <h2 class="product-h2">€00</h2>
              <div class="item-desc">
                Contains "0000"<br>&nbsp;
              </div>
            </div>
          </section>
    
          <section class="items">
            <div id="full-bite" class="item">
              <div class="item-header">Full Byte<br>&nbsp;<br>&nbsp; </div>
              <h2 class="product-h2">¥00</h2>
              <div class="item-desc">
                 "1111" for 255<br>&nbsp;
              </div>
            </div>
          </section>

          <section class="items">
            <div id="Oct31" class="item">
              <div class="item-header">Oct 31<br>=<br>Dec 25 </div>
              <h2 class="product-h2">¥00</h2>
              <div class="item-desc">
                Also Hex 19 00011001
              </div>
            </div>
          </section>
        </section>
        <hr>

        <section id="Contact"><h6>&nbsp;</h6>

          <form id="form" action="https://www.freecodecamp.com/email-submit" method="POST">
            <table>
             <tr>
              <td style="text-align: center;"><textarea id="message" name="comment"  rows="6" cols="40">Your comment, please.</textarea>
                </td>
                <td style="text-align: center;">
                  <label for="email">  Email: 
                    <input id="email" name="email" type="email" placeholder="Your e-address is required" size="40" required>
                  </label><br><br>
                  <input id="submit" class="button" type="submit" value="Send"><br><br>
                  Or use your email to <a href="mailto:fklusmann@aol.com?subject=Mailed_from_the_landing_page" style = "background-color:antiquewhite; color: blue;" >send me email</a>.  
                </td>
              </tr>
            </table>
          </form>
        </section>
      </section>
      <footer></footer>
    </section>  
  </body>
</html>
--------------------------- css follows ----------------------------
/*  styles-01.css for landing-01.html */
/* change to styles.css for test */

/* border around each object */
/* * { border: 1px solid black; } */

body {
  background-color: rgb(250, 242, 242);
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#page-wrapper {
position: relative;
width: 90%;
margin-left: auto;
margin-right: auto;
}
header {
position: fixed;
top: 0;
width: 100%;
height: 80px;
padding: 0px 10px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: aquamarine
}

#logo {width: 78px; 
height: 78px; 
display: flex;  
justify-content: center; 
margin-left: 5PX;
background-color: transparent;
}

h1 {
color: blue;
}

#nav-bar{
  position: relative;
  width: 40%;
  height: 80px;
  background-color: transparent;
  }

/* nav ul */
ul { 
  list-style-type: none;
  overflow: hidden;
}

/* nav li */
li {
  float: left;
  border-left: 1px solid blue;
  border-right: 1px solid blue;
  color: blue;
  list-style-type: none;
}

/* nav li a */
li  a {
  text-decoration: none;
  display: block;
  padding: 8px;
  color: blue;
}

a {
  text-decoration: none;
}

#main {
  margin-top: 90px;
}

hr {
width: 85%;
height: 4px;
border-width: 0;
color: blue;
background-color:blue;
}

#video-box {
display: flex;
margin-left: 10px;
padding-left: 10px;
}

.grid {
  display: flex
}

.grid-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.item {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 150px;
  height: 175px;
  margin: 20px;
  border: 2px solid blue;
  border-radius: 3px;
  max-width: fit-content;
  justify-content: center;
  background-color: blanchedalmond;
  border: 3px solid green;
}

.item-header {
  background-color: rgb(44, 192, 192);
  color: white;
  text-align: center;
  letter-spacing: 2px;
  padding: 5px 10px;
  margin-top: 0;
  border-top: 0;
  text-transform: uppercase;
  font-weight: 700;
}

.item > h2 {
  text-align: center;
}
.item-desc {
  text-align: center;
}

table {
align-items: center;
margin-left: auto;
margin-right: auto;
}

td {
text-align: center;
}


/* for snartphones are 450 */
@media (max-width: 450px) {
    body {
        background-color: coral;
    }
}

/* for tablets */
@media (max-width: 800px) and (min-width: 451px) {
    body {
        background-color: yellow;
    }
}

/* See https://www.makeuseof.com/how-to-use-media-queries-in-html-and-css-to-create-responsive-websites/ 
for an understanding of this. Also, see it work by changing the width of the screen. */


Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

Put your code on codepen so people can see it and understand your concerns.

Thank you, Hanna.
I am looking for How to Use CodePen now.
– Fred

@hbar1st , my code is now at https://codepen.io/FKlusmann/pen/poKxrEM?editors=1111

I did not see how to write a description there other than in the title. I’ll go back and keep looking.

Thank you.
– Fred

1 Like

Hi @FKlusmann,

Please read this MDN documentation and and you will find your answer.

Go here => scroll-padding-top - CSS: Cascading Style Sheets | MDN

Hope this helps.

Thanks,
Hal_Jordan

Thank you, @codewright . I looked at the demo there but don’t see any difference or how to use it. I will keep looking.
– Fred

I need a hint on where to to place scroll-padding-top: 100px;
The header is 80px high, and anyplace I have tried to put this code gives the same results.
Thanks again.

Hi @FKlusmann,

Not sure what you tried but, fyi this is the answer.
In the MDN doc their is a key statement about scroll-padding-top of what it is used for:

“…or to put more breathing room between a targeted element”.

That being said, go to your CSS and assign to your html a scroll-padding-top: 5em;

Of course you will need to play with the em or px to the desired height.

Hope this helps.

Thanks,
Hal_Jordan

I tried to place it under body. even

  • {scroll-padding-top: 100px;}
    and did not see any change.
    Thanks, @codewright .

Not body

assign to html

1 Like

Thank you, @codewright !

That did the trick.

Fred

@codewright and @hbar1st , Thanks again.

One last question for you: The #page-wrapper { position: relative; width: 90%; margin-left: auto; margin-right: auto; } is the container for everything. The first item within this is with css header {position: fixed; top: 0; width: 100%; height: 80px;
padding: 0px 10px; display: flex; justify-content: space-around; align-items: center;
background-color: aquamarine }

Why does the header extend to the right outside of the page-wrapper? I expect the width: 100% to equal the page-wrapper width.

Thank you!

– Fred

Hi @FKlusmann,
Technically your <body> tag is the container for everything visible.
That being said, in your case the next container that encompasses everything is your #page-wrapper.

As far as to your question, this link has nice explanation for you: => What Does "width: 100%" Do in CSS? - Impressive Webs

When you give an element a width of 100% in CSS, you’re basically saying “Make this element’s content area exactly equal to the explicit width of its parent — but only if its parent has an explicit width.” So, if you have a parent container that’s 400px wide, a child element given a width of 100% will also be 400px wide, and will still be subject to margins, paddings, and borders — on top of the 100% width setting. The image below attempts to illustrate this:

The child's content area will equal the parent's

Thanks,
Hal_Jordan

Thank you, Hal @codewright .

I took me a while to understand. Then, in my mind, I took the child to the Probate Court and awarded “width: inherit;”.

Again, Thank You!
– Fred