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 Margaret James
Margaret James
9,444 Points

I am having trouble w/ understanding why neither "hidden-for-small-only" and "hide-for-small-only" are working

Code Challenge 4th question is asking to hide the content of the first column when on small devices.

I have tried both "hidden" and "hide" for small devices as well as putting those classes in the column's outer wrapper div.

Any ideas?

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

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

<div class="ft-copy six 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 -->

1 Answer

Joren Paridaens
Joren Paridaens
1,602 Points
Joren Paridaens
Joren Paridaens
1,602 Points

The class name you need to use is "hide-for-small".

<div class="columns large-6 hide-for-small"> ... </div>

This automatically means you only want to hide the column when the screen size is "small". If you want to hide it for small and medium size screens simply add the classes "hide-for-small hide-for-medium" both.