Unfinished product page needs assistance

Hi on may page I have some text above the email form field but I can’t seem to view it, and a review of my code doesn’t show where I’m wrong.

Also, I want my icons to appear on the left and the accompanying text on the right, any advice?

Hello @kodeking, I like the style you are going for so far. Your page is coming along well!

There are a few things going on here that I found interesting…

First off, an easy fix to find your missing text is to change your tooth section from

#tooth {
    margin-top: 80px;
}

to another value such as 250px. This bumps your section farther down the page.

While investigating the cause behind your missing text, I found that your tooth section actually begins above the start of the page. The reason for this is your justify-content: center; attribute within your #tooth section CSS. Removing this attribute, or changing the value to anything else such as justify-content: left; fixes your missing text.

Another thing I’ve noticed is that you use the <header> tag well to wrap your header and nav content, but there is nothing containing your main page content. I would change your layout from

<body>
    <header>
    </header>

    <section id="tooth">
    </section>

    <section id="example"
    </section>
</body>

to something that wraps your tooth section and all other sections

<body>
    <header>
    </header>
    
    <main>
        <section id="tooth">
        </section>

        <section id="example">
        </section>
    <main>
</body>

Check out this website on flexbox display.

It provides additional information on flex display which you are already using, and I think this would help here. Think about wrapping your image and text in a flexbox, and then creating boxes around these elements to display them on the same line.

Hi shadew!

Thanks for taking the time. With the icons I was trying to get them and some text side by side. Here is what I did…not quite good enough.

Could you help me out?

appreciate any help

Happy to help @kodeking, I can give you an example of the flex blox display I would use here:

<div class="box">
          <div>One</div>
          <div>Two</div>
          <div>Three
              <br>has
              <br>extra
              <br>text
          </div>
        </div>

and

  .box {
            display: flex;
          }

You can use this to create a “box” div around your image, header, and text. Then use the display of flex on your box div to allow the items inside to sit side by side, rather than above each other. You can set widths and positioning using attributes in the site I linked previously if you need ideas.