Product Landing Page issue! Help, please!

Code Feedback
1

I actually passed all of the tests for the Product Landing page, but the section with the cards, which is supposed to be three across and a footer underneath is now thrown out of line.
I can’t figure out what is wrong with it. It was working before. Any help is appreciated!

2

Looks like you have a couple of extra closing divs scattered around that section. I tried to post you a sort of condensed view of your code, with the specific tags marked that need to be removed:

<div class="container" id="tickets"> 
    <div class="col-1-of-3">...</div>
      </div> <--- this
    <div> <--- this
    <div class="col-1-of-3">...</div>
     </div> <--- this
    <div class="col-1-of-3">...</div>
     </div> <--- this
</div>

So at the end of it all it should look like this:

    <div class="container" id="tickets">
      <div class="col-1-of-3">...</div>
      <div class="col-1-of-3">...</div>
      <div class="col-1-of-3">...</div>
  </div>

Hope that helps! :grin:

1 Like
3

Thank you. I tried your method here and it threw everything to the left and shrank the second two.

screen shot

4

Ahhh I see. You deleted a few too many end div tags. But that’s okay, easy fix!

Here, maybe this will be better, this is the entire ticket section code with the missing syntax, just replace it with your current code:

<section id="get-tickets">
    <div class="container" id="tickets">
      <div class="col-1-of-3">
        <div class="card fit">
          <p class="paragraph u-space_bottom-sm">Mean Girls</p>
          <p class="paragraph text-bold font-lg">$99-$343</p>
          <ul class="u-space_bottom-sm">
            <li>Musical, Original, Broadway</li>
            <li>August Wilson Theater</li>
            <li>Show Run Time: 2 hours and 30 minutes <br>with one intermission</li>
          </ul>
          <a href="#" class="btn btn-black u-space_bottom-sm">SELECT</a><br><br><br>
        </div> <!-- end card fit div -->
      </div> <!-- end col-1-of-3 div -->
        <div class="col-1-of-3">
          <div class="card fit">
            <p class="paragraph u-space_bottom-sm">Come From Away</p>
            <p class="paragraph text-bold font-lg">$69-$177</p>
            <ul class="u-space_bottom-sm">
              <li>Musical, Original, Broadway</li>
              <li>Gerald Schoenfeld Theatre</li>
              <li>Show Run Time:<br> 100 minutes with no intermission</li>
            </ul>
            <a href="#" class="btn btn-black u-space_bottom-sm">SELECT</a><br><br><br>
          </div> <!-- end card fit div -->
      </div> <!-- end col-1-of-3 div -->
          <div class="col-1-of-3">
            <div class="card fit">
              <p class="paragraph u-space_bottom-sm">Dear Evan Hansen</p>
              <p class="paragraph text-bold font-lg">$99-$343</p>
              <ul class="u-space_bottom-sm">
                <li>Musical, Original, Broadway</li>
                <li>Music Box Theatre</li>
                <li>Show Run Time: 2 hours and 30 minutes <br>with one intermission</li>
              </ul>
              <a href="#" class="btn btn-black u-space_bottom-sm">SELECT</a><br><br><br>
  </div> <!-- end card fit div -->
          </div> <!-- end col-1-of-3 div -->
    </div> <!-- end container tickets div -->
</section>

By the way whenever I have a lot of divs (especially if they’re closing around the same spots) I’ll make a comment as to what they go to. It just helps me keep track with a small visual cue. I’ve added some to your code as an example.

5

Thank you thank you thank you thank you. I stared at it way too long. That plus I was simultaneously working on the portfolio page so I it was making me crazy.

1 Like
6

Hi @mitzvahgirl,

To avoid that type of errors you can use a tool:

Validator - Wikipedia

A validator is a computer program used to check the validity or syntactical correctness of a fragment of code or document. The term is commonly used in the context of validating HTML,[1][2] CSS and XML documents or RSS feeds though it can be used for any defined format or language.

  • W3C validate by input:

The W3C Markup Validation Service

Video:

Cheers and happy coding :slightly_smiling_face: