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

Posted by Ron Kenzig
Ron Kenzig
4,884 Points

Framework Basics: Build a Website with Foundation, Stage 5 - Challenge 3

This seems like an easy task, but I'm stumped? Here is the question...

Next, pull the column on line 25 over by 1 column.

<div class="large-5 columns">

I figured that this would do the job..

<div class="large-5 large-pull-1 columns">

I've also tried this, with no luck :/

<div class="large-5 large-offset-1 columns">

Any suggestions?

Ron Kenzig
Ron Kenzig
4,884 Points

Here is the full code from the challenge... maybe I'm missing some simple mathematics from a previous offset challenge?

<!-- Form Panel -->
  <div class="row">
    <div class="large-12 columns">
      <div class="rnd panel">
        <div class="row">
          <div class="large-5 large-offset-1 columns">
            <form>
              <p><strong>Enter your number, we'll text you the link:</strong></p>
              <input type="text" placeholder="Phone Number">
              <button type="submit" class="btn-submit button">Submit</button>
            </form>
          </div>
          <div class="large-5 columns">
            <p><strong>Visit an app store to download the app now!</strong></p>
            <a class="btn-dl rnd" href="#">iOS</a>
            <a class="btn-dl rnd" href="#">Android</a>
          </div>
        </div>       
      </div>
    </div>
  </div><!-- End Form Panel -->
Guil Hernandez
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hey Ron Kenzig,

You are correct. Foundation 5 added the small, large, and medium grid prefixes in their source ordering classes. However, this code challenge simply needs the pull-1 source ordering class, without the size prefix.

We're releasing a stage really soon on Foundation 5 updates! :)

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Thanks for the clarity and swift response. :)

Ron Kenzig
Ron Kenzig
4,884 Points

Awesome, thanks Guil! I can't wait, I am loving these frameworks... I just need to decide on which one to go with from now on :)

4 Answers

Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Wow just sent me mad doing this, not used to foundation. Anyway checked the documentation and it states as you correctly put class named large-pull-1 so i tried incase maybe error on your end. But it failed to pulling out my hair i thought i would try a class named pull-1 and it passed not sure why it is doing that but tagging the tutor Guil Hernandez to have a look. here is the link to the docs.

Ron Kenzig
Ron Kenzig
4,884 Points
Ron Kenzig
Ron Kenzig
4,884 Points

I'm glad I wasn't the only one having issues! I've been following the docs as well, and was very close to pulling hair haha. Maybe it has something to do with Foundation 4 and 5? Who knows? Thanks for your help Adam!

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

No problem. Just click best answer next to it to close it off and upvote. Ron Kenzig need to give foundation a try i like the nav's but so used to bootstrap its daunting lol.

Larry Singleton
Larry Singleton
18,947 Points
Larry Singleton
Larry Singleton
18,947 Points

<!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.min.css"> <link rel="stylesheet" href="css/my-styles.css" > </head> <body>

<!-- Form Panel --> <div class="row"> <div class="large-12 columns"> <div class="rnd panel"> <div class="row"> <div class="large-5 large-offset-1 columns"> <form> <p><strong>Enter your number, we'll text you the link:</strong></p> <input type="text" placeholder="Phone Number"> <button type="submit" class="btn-submit button">Submit</button> </form> </div> <div class="large-5 pull-1 columns"> <p><strong>Visit an app store to download the app now!</strong></p> <a class="btn-dl rnd" href="#">iOS</a> <a class="btn-dl rnd" href="#">Android</a> </div> </div>
</div> </div> </div><!-- End Form Panel -->

</body> </html>

Kasia Ekiert
PLUS
Kasia Ekiert
Courses Plus Student 13,248 Points
Kasia Ekiert
Kasia Ekiert
Courses Plus Student 13,248 Points

large-5 pull-1 columns