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

Posted by Ary de Oliveira
Ary de Oliveira
28,298 Points

CSS fRAMEWORK BASICS

are missing something here?

Need help pls...

index.html 
<!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 class="ft-icon rnd camera"></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>

2 Answers

Sajid Latif
seal-mask
.a{fill-rule:evenodd;}techdegree
Sajid Latif
Full Stack JavaScript Techdegree Student 22,368 Points
Sajid Latif
.a{fill-rule:evenodd;}techdegree
Sajid Latif
Full Stack JavaScript Techdegree Student 22,368 Points

This works ...

<div class="large-6 columns hide-for-small">
   <div class="ft-icon rnd camera large-5 columns"></div>
</div>

<div class="ft-copy">
   <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>
Mikkel Rasmussen
Mikkel Rasmussen
31,772 Points
Mikkel Rasmussen
Mikkel Rasmussen
31,772 Points

The row class should be in the same div as the ft class

  <div class="ft row">

  <div class="large-6 columns hide-for-small">
      <div class="ft-icon rnd camera"></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 -->