Neighborhood Guides: Images 1 Error


#1

Error: Oops, try again. Add a second <div class="thumbnail">..</div>

Code:

    <div class="container">
      <h2>Neighborhood Guides</h2>
      <p>Not sure where to stay? We've created neighborhood guides for cities all around the world."</p>
      <div class="row">
      <div class="col-md-4">
      <div class="thumbnail">
      <img src="http://goo.gl/0sX3jq">
      </div>
      </div>
      </div>
      <div class="col-md-4">
       <div class="thumbnail">
      <img src="http://goo.gl/an2HXY">
      </div>
      </div>
      </div>
      <div class="col-md-4">
      </div>
</div>

thank you


#2

      <div class="row">
      <div class="col-md-4">
      <div class="thumbnail">
      <img src="http://goo.gl/0sX3jq">
      </div>
      </div>
      </div>

If I add some indenting and some comments to your code, like this:

      <div class="row">
          <div class="col-md-4">
              <div class="thumbnail">
                  <img src="http://goo.gl/0sX3jq">
              </div> <!-- ends thumbnail -->
          </div> <!-- ends col-md-4 -->
      </div> <!-- ends row -->

And I tell you that this exercise is expecting to find two thumbnail divs in the first column, does that help?


#3

So how are we defining a column? Thanks


#4

A column, is a div with a class name of col-md-4:

<div class="col-md-4">

</div>

#5

Ok-that's clear. Now i'm more confused on the original question:).


#6

This exercise is expecting to find:
- 1 rows with 3 columns inside of it
- columns one should have 2 thumbnails inside it
- columns two and three should be empty

If you look at the code that I posted with the comments you will see that you have:
- 1 row with 1 column in it
- that one column only has 1 thumbnail

The code checker is trying to find what it is expecting but just can't.


#7
<div class="neighborhood-guides">
  <div class="container">
  <h2>Neighborhood Guides</h2>
  <p>Not sure where to stay? We've created neighborhood guides for cities all around the world."</p>
  <div class="row">
  <div class="col-md-4">
  <div class="thumbnail">
  <img src="http://goo.gl/0sX3jq">
  <div class="thumbnail">
  <img src="http://goo.gl/an2HXY">
  </div>
  </div>
  </div>
  </div>

I know this is wrong. I have added both Images under a single row. I am clearly missing something.


#8

You do have two thumbnail divs in that first column now, but neither of those thumbnails has a closing tag located as illustrated in my earlier post. You must close the first thumbnail before you open the second.

If you can get that part sorted then we can move on to the other two columns :smile:


#9

A post was split to a new topic: 6. Neighborhood Guides - Images 1


#10

All is my mistake, but it is not clear at which level it had to be added.

the mistake I did was to keep the div in a line.

<div class="col-md-4"></div>

Every time I copy/paste the code, I paste it underneath the div but not inside.

Now I fixed all the div on two levels.

<div class="col-md-4">
</div>

Why I failed: I copied the Thumbnail between the div but not inside.

<div class="row">
        <div class="col-md-4"></div>
            <div class="thumbnail">
                <img src="http://goo.gl/0sX3jq">
            <div class="thumbnail">
                <img src="http://goo.gl/an2HXY">
            </div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
    </div>

What worked for me was:

<div class="row">
        <div class="col-md-4">
            <div class="thumbnail">
                <img src="http://goo.gl/0sX3jq">
            </div>
            <div class="thumbnail">
                <img src="http://goo.gl/an2HXY">
            </div>
        </div>
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
    </div>