Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Framework Basics Build a Website with Foundation Content Layout with Grids

Herkko Hietanen
Herkko Hietanen
30,501 Points
Posted by Herkko Hietanen
Herkko Hietanen
30,501 Points

Failing to set the Foundation 5 column width

I am failing to pass the following task. See my code below:

Task: Give the second div inside .row the class for defining a column. Then set it to span the width of 5 columns in the large grid.

index.html 
  <div class="ft">

    <div class= "row">
      <div class="ft-icon rnd camera large-6 columns"></div>
    </div>

    <div class="ft-copy large-5 columns">
      <h2>Securely delete photos &amp; video based on a timer</h2>
      <p>
        Learn how to write the code that downloads and displays messages, photos, and videos that timeout after a few seconds. Then create the code that deletes them from the back-end to make them "self destruct."
      </p>
    </div>

  </div><!-- End Feature Copy -->

Bummer! Make sure you're spanning it the width of 5 columns in the large grid.

Herkko Hietanen
Herkko Hietanen
30,501 Points
Herkko Hietanen
Herkko Hietanen
30,501 Points

Found the bug. The first div should be the one with .ft.

2 Answers

steve thomas
steve thomas
9,753 Points
steve thomas
steve thomas
9,753 Points

Bummer - what is problem Please? <!DOCTYPE html> <html>

<head> <title>Ribbit - A Treehouse Project</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/normalize.css" > <link rel="stylesheet" href="css/foundation.css"> <link rel="stylesheet" href="css/my-styles.css" > </head> <body>

<!-- Feature Copy --> <div class="ft">

<div class="row">
  <div class="ft-icon rnd camera large-6 columns"></div>
</div>

<div class="ft-copy large-5 columns">
  <h2>Securely delete photos &amp; video based on a timer</h2>
  <p>
    Learn how to write the code that downloads and displays messages, photos, and videos that timeout after a few seconds. Then create the code that deletes them from the back-end to make them "self destruct."
  </p>
</div>

</div><!-- End Feature Copy -->

</body> </html>

madhavi gontla
madhavi gontla
8,691 Points
madhavi gontla
madhavi gontla
8,691 Points

<div class=" large-6 columns ft-icon rnd camera large-5 columns">