Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Framework Basics Prototyping with Foundation Building a Headline Panel, with Stylish Buttons

foundation 5

Im making the same example, but in my case is in foundation version 5, and the button disappear, but for some reason the button that used that class hide it gets large.

6 Answers

Just ran across that my self, the video is a tad out of date, but Guil did say refer to the documentations. The hidden-for-small-only class helped resized the button to the appropriate size and hide it once I got to the small view port

<a class="button hidden-for-small-only" href="#" >Text me the link</a>

The problem was the naming of the classes, it looks like in foundation 5 is a little different, now is "hidden-for-small-only", here it is the link

http://foundation.zurb.com/docs/components/visibility.html

Tom Mertz
Tom Mertz
15,254 Points

If you're following along in the videos with foundation 4, I think the best thing to do is get the project files. That way it comes with the version of foundation you are seeing in the video. Then when you watch the foundation 5 video you can get the latest version.

That is, of course, the easy way. Exploring foundation 5 and its documentation can only help :D

Mark Phillips
Mark Phillips
13,124 Points

Hi Mauro;

I'm not sure why that's happening in your markup. I'm using the Foundation 5 files also and when adding the "hide-for-small" class to the anchor inside the paragraph with the "button-group radius" classes, the text me the link button disappears at the small mobile size with both the "hide-for-small" and "hide-for-small-only" classes, they both seem to do the same thing.

I've included my code example below.

    <!-- Headline Content -->
    <div class="row panel">
      <div class="large-12 columns">
        <h1>Self-destructing message app</h1>
        <p class="lead">Learn how to build this fun little app by signing up for a Treehouse account today.</p>
        <p class="button-group radius">
          <a class="button success" href="#">Download the app</a>
          <a class="button hide-for-small-only" href="#" >Text me the link</a>
        </p>
      </div>
    </div>
    <!-- End Headline Content -->
Ian VanSchooten
Ian VanSchooten
3,549 Points

I've noticed the same thing as well, and can't figure out what's going on (I'm using Foundation 5.5.0). When I add the class "hide-for-small-only", or any visibility class for that matter, the button turns into an expanded button. Adding size classes to the button does not prevent it. Visibility behaves as expected. Any thoughts on what could be causing this?

alt

not really sure maybe you should download the file from Foundations website it has all the newest features and documentation that will help you out

I found that the only way to display the button group correctly was to use an unordered list like they have in the documentation. Using a paragraph with anchor elements caused the same issue you have. Try doing it like this:

<ul class="button-group radius">
  <li><a href="#" class="button success">Download the app</a></li>
  <li><a href="#" class="button hide-for-small-only">Text me the link</a></li>
</ul>
Kevin Collins
Kevin Collins
15,354 Points

I've figured out the answer to this one using Foundation 5. The hide-for-small-only change the display to "inherit". If it is inheriting from the parent <p> then it is inheriting a display of "block". By adding a custom css line to the MyStyles.css file for the <p> element to display inline-block the issue is resolved.

p {
display:inline-block;
}

You could alternately add this css to the .button-group class in your custom CSS as opposed to changing every <p> on the site with the above code.

.button-group {
display:inline-block;
}