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

Holly Banning
Holly Banning
16,096 Points
Posted by Holly Banning
Holly Banning
16,096 Points

Foundation basics- content layout with grids- objective 4/4 problem

Hi all,

Working my way through foundation basics (loving the tutorials btw) and have bumped into a problem at content layout with grids objective 4.

Asks you to: "give the first column a class that will hide it in the small grid."

I thought this was the class hide-for-small, but it doesn't seem to be working. Anyone know why?

<div class="ft row">

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

Thanks in advance for help:)

Holly

5 Answers

Nicole H
Nicole H
2,981 Points
Nicole H
Nicole H
2,981 Points

Sorry. I didn't realize you were on the code challenge. I thought you were on the stage of learning about how to implement the font icons. So sorry to add additional confusion.

It looks like you are applying the hide-for-small class to the wrong column and have the large-6 class on the wrong div. The challenge states: Finally, give the first column a class that will hide it in the small grid. This is what I came up with and was able to complete the challenge:

<div class="large-6 columns hide-for-small">
      <div class="large-5 columns ft-icon rnd camera"></div>
</div>
Nicole H
Nicole H
2,981 Points
Nicole H
Nicole H
2,981 Points

Hi Holly,

Try adjusting the icon font markup to use fi instead of ft and then add the class that matches the icon like so: 

<i class="fi-camera"></i>

Once you do that then add the hide-for-small class and see if that works.

Holly Banning
Holly Banning
16,096 Points
Holly Banning
Holly Banning
16,096 Points

Ah thanks for the advice but it still didn't work, not sure why.

Holly Banning
Holly Banning
16,096 Points
Holly Banning
Holly Banning
16,096 Points

Ah right! totally forgot about that and gave the class to the wrong div, thanks for the help:)

Nicole H
Nicole H
2,981 Points
Nicole H
Nicole H
2,981 Points

Great! Glad I could help!