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

Jaclyn Bayless
Jaclyn Bayless
2,285 Points
Posted by Jaclyn Bayless
Jaclyn Bayless
2,285 Points

.hide-for-small

Can't complete this challenge. Tried every listed class for hiding on small devices. Not sure what is going on. Here is my code:

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

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

<div class="ft-copy columns large-5">
  <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>

6 Answers

Kiko Doran
Kiko Doran
4,752 Points
Kiko Doran
Kiko Doran
4,752 Points

Figured it out. The issue is actually with questions 2 and 3. You made a mistake in that question 2 says the first div in the row. You added it to the second div. Then the third question is off as well. Weird that it approved your code in #2 and #3.

Here is what the code should look like based on their questions:

<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>
Shane Ashford
Shane Ashford
14,705 Points

Thanks Jaclyn and Kiko! I tried every variation I could think of before finding this thread.

Rebecca Taylor
Rebecca Taylor
8,349 Points

That happened to me too! It approved my answers for the first two questions even though I'd put the classes on the wrong div! Thanks for the solution!

Kiko Doran
Kiko Doran
4,752 Points
Kiko Doran
Kiko Doran
4,752 Points

You need to include the code for .hide-for-small in both the html and css. Please post your css for the media query as well as the code that is handling the display: none stuff. Hard to know exactly what isn't clicking unless I can see your css as well.

Jaclyn Bayless
Jaclyn Bayless
2,285 Points
Jaclyn Bayless
Jaclyn Bayless
2,285 Points

There is no CSS available for this. It is a challenge:

Framework Basics Challenge task 4 of 4 Finally, give the first column a class that will hide it in the small grid.

(see above code)

Keeps giving me this message: Bummer! Make sure you're using the correct class for hiding elements in small devices.

Kiko Doran
Kiko Doran
4,752 Points
Kiko Doran
Kiko Doran
4,752 Points

I hadn't done this exercise yet. I just went through it and you're right that there is a mistake there. I tried pasting the .hide-for-class all over to see if maybe they had a typo in the question. I also tried the .show-for-medium-up class to see if it was expecting that. Neither worked for completing the code challenge.

Kiko Doran
Kiko Doran
4,752 Points
Kiko Doran
Kiko Doran
4,752 Points

Please up vote the answer in case other's have the same problem. It was weird that it didn't realize the problem until the 4th question. Good luck with the rest of the track!

Marie Urbina
Marie Urbina
7,168 Points
Marie Urbina
Marie Urbina
7,168 Points

Thank you Kiko! I made the same mistake and had the same issue.