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 Prototyping with Foundation Building a Headline Panel, with Stylish Buttons

Posted by Mauro Bonucci
Mauro Bonucci
5,953 Points

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

Elijah Collins
Elijah Collins
19,457 Points
Elijah Collins
Elijah Collins
19,457 Points

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>
Mauro Bonucci
Mauro Bonucci
5,953 Points
Mauro Bonucci
Mauro Bonucci
5,953 Points

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
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
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
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

Elijah Collins
Elijah Collins
19,457 Points

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

Zach Allan
Zach Allan
19,452 Points

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
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;
}