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

Sebastian Bachmann
Sebastian Bachmann
7,046 Points
Posted by Sebastian Bachmann
Sebastian Bachmann
7,046 Points

[Framework Basics] Code Challenge - Group Buttons

Hi all,

i am not sure what i am doing wrong here, but i am not able finish the task: Next, give the p element on line 18 Foundation's class for grouping buttons. This is the Code-Challenge after the data-orbit video.

I have added the button-group class to the <p> element, but nothing happens. Any ideas?

Thank you in advance for you answer!

Regards, Sebastian

6 Answers

Sebastian Bachmann
Sebastian Bachmann
7,046 Points
Sebastian Bachmann
Sebastian Bachmann
7,046 Points

Hey Wayne,

found my mistake! 

<p class="radius button-group">

does the trick ... :-) !

Regards, Sebastian

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

If you can show the line of code it would be a great help, i just passed that same challenge without probs.

Sebastian Bachmann
Sebastian Bachmann
7,046 Points
Sebastian Bachmann
Sebastian Bachmann
7,046 Points

Hi Wayne,

sorry my fault!

Challenge task 2 of 3 Next, give the p element on line 18 Foundation's class for grouping buttons.

    <!-- Content Slider -->
    <div class="row">
      <div class="large-12 columns" data-orbit> 
        <div>
          <h1>I am a Front-end Designer</h1>
          <p class="lead">I design beautiful user interfaces, then bring them to life with HTML, CSS, and JavaScript.</p>
          <p class="radius"> <!-- Line 18 -->
            <a class="button" href="#">See my work</a>
            <a class="button">Hire me!</a>
          </p> 
        </div>
        <div>
          <h1>I Also Write About the Web</h1>
          <p class="lead">I love teaching others about all the latest web in technology.</p>
          <p><a class="button radius" href="#">Read my posts</a>   
        </div>
        <div>
          <h1>Photography is My Favorite Hobby</h1>
          <p class="lead">I love photographing nature, people, and everyday things.</p>
          <p><a class="button radius" href="#">See my work</a></p> 
        </div>
      </div>
    </div><!-- End Content Slider -->
Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi, Sebastian,

I don't see you group-button addition in your code.

I'm presuming that it looks like this, as you have said you tried it already?

<p class="lead button-group">
Sebastian Bachmann
Sebastian Bachmann
7,046 Points
Sebastian Bachmann
Sebastian Bachmann
7,046 Points

Hi Wayne,

this is my code in Line 18

```<p class="button-group">

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

I don't see line numbers but just by counting down the p i see is 

<p class="lead">I love teaching others about all the latest web in technology.</p>

So it looks like you are replacing the lead with button-group.

You need to add the button-group to the class that contains lead, so it should look like.

<p class="lead button-group">I love teaching others about all the latest web in technology.</p>
Sebastian Bachmann
Sebastian Bachmann
7,046 Points
Sebastian Bachmann
Sebastian Bachmann
7,046 Points

Hi Wayne,

the original code now with Linenumbers :-)

The task is: Next, give the p element on line 18 Foundation's class for grouping buttons.

I have extended the <p> tag on line 18 with <p class="button-group"> but, well, nothing happened. 

12    <!-- Content Slider -->
13   <div class="row">
14      <div class="large-12 columns" data-orbit> 
15        <div>
16          <h1>I am a Front-end Designer</h1>
17          <p class="lead">I design beautiful user interfaces, then bring them to life with HTML, CSS, and JavaScript.</p>
18          <p class="radius">
19            <a class="button" href="#">See my work</a>
20            <a class="button">Hire me!</a>
21          </p> 
22        </div>
23        <div>
24          <h1>I Also Write About the Web</h1>
25          <p class="lead">I love teaching others about all the latest web in technology.</p>
26          <p><a class="button radius" href="#">Read my posts</a>   
27        </div>
28        <div>
29          <h1>Photography is My Favorite Hobby</h1>
30          <p class="lead">I love photographing nature, people, and everyday things.</p>
31          <p><a class="button radius" href="#">See my work</a></p> 
32        </div>
33      </div>
34    </div><!-- End Content Slider -->