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

Julian Rodriguez
Julian Rodriguez
5,549 Points
Posted by Julian Rodriguez
Julian Rodriguez
5,549 Points

Framework Basics Code Challenge

Hello,

I'm having a bit of trouble figuring out a code challenge in Stage 5 of "Build a Website with Foundation". Here's the question:

"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."

Here's my code:

    <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>
    ``` 

Thanks in advance.

8 Answers

Giovanni CELESTE
Giovanni CELESTE
20,961 Points

Hi Julian,

Your .columns .large-6 div is not within a .row div (you have a first large-6 columns div in your row div, but your second columns div is out of the row div). Tell us if it was a correct guess :).

Julian Rodriguez
Julian Rodriguez
5,549 Points
Julian Rodriguez
Julian Rodriguez
5,549 Points

Hi Giovanni,

Thank you for your reply. That worked :)

It's a bit odd because that's the way the code was set up for the challenge. Tricky, tricky. In any case, this has taught me to look a bit more closely at other errors and solutions to the problem.

Giovanni CELESTE
Giovanni CELESTE
20,961 Points
Giovanni CELESTE
Giovanni CELESTE
20,961 Points

Well, I checked up the challenge, and what I understood is that the parent div "row" is not the one you chose to add your .row class. I added it in the first div of the feature, next to the .ft class (which contains every div of the feature section div). Then I had no problem with adding the columns classes without modifying the markups.

Giovanni CELESTE
Giovanni CELESTE
20,961 Points
Giovanni CELESTE
Giovanni CELESTE
20,961 Points

Glad it helped you :)

Liwam Kidanemariam
Liwam Kidanemariam
10,316 Points
Liwam Kidanemariam
Liwam Kidanemariam
10,316 Points

Make sure you add the correct class to Column 2.

Charmaine Wallace
Charmaine Wallace
22,276 Points
Charmaine Wallace
Charmaine Wallace
22,276 Points

I think the issue is that we get nice and spoilt by Guil leaving empty div tags there for us. This time, you actually have to make a new one yourself.

Julian Rodriguez , your answer was an actual lightbulb moment!