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

General Discussion

Leah Thompson
Leah Thompson
14,997 Points
Posted by Leah Thompson
Leah Thompson
14,997 Points

Something isn't quite right...

Wellity, I'm working my way through round 1 of the web design course. I've been copying everything word for word, but I have 2 distinct problems.

  1. Any CSS for the .btn class doesn't work.
  2. The grid alignment for the 'coming soon' cakes and the new cakes, place the images underneath each other instead of next to each other (even though one is set to grid 7, the other to grid 5. i even fiddled around and made both omega so there was 'more room' but it still didn't work...
.btn {
    color: #FAF3BC;
    background-color: #4FB69F url('img/texture.png') no-repeat right top
    padding: 15px 30px;
    margin: 40px 0px;
    border-radius: 25px
    text-transform: uppercase;4CCSA7
}

I'm using Sublime text editor.... annnnd here's the code for the images that are stacking:

<div id="featured-cupcake" class="grid_7 omega" >
<h2>Cupcake of the Week</h2>
        <p>This week's featured cupcakes is the <a href='#'>Avacado Chocolate Cupcake</a>. Its strange combo of flavours wil kick your tastebuds into fiesta mode!</p>
        <img src="img/featured-cupcake.jpg" alt="Avacado Chocolate Cupcake"
      </div>

      <div id="new-cupcakes" class="grid_5 omega">
        <h2> Fresh Out of the Oven </h2>
        <p> Our newest cupcakes are <a href='#'>bacon Me Crazy</a> and <a href='#'> Jalapeno So Spicy </a>
          <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
          <img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
      </div>

Any clues would be great, so far so good :)

6 Answers

Anthony Hind
Anthony Hind
5,715 Points
Anthony Hind
Anthony Hind
5,715 Points

Hi Leah, Can you post what you have in the head of your html file <head> </head> errors like this can sometimes be that you have not linked to your css files correctly

mjhernandez
mjhernandez
2,684 Points
mjhernandez
mjhernandez
2,684 Points

Hey there Leah, looks like you're using the apostrophe instead of quotation marks around the two pound signs on the href="#" area. Also, you're missing the closing paragraph</p> or it might have been cut off when you cut and pasted it. Hope this helps.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points
  • Several rules for the btn class are missing semi-colons
  • The <img>tag for featured-cupcake.jpg is missing it's closing angle bracket
Leah Thompson
Leah Thompson
14,997 Points
Leah Thompson
Leah Thompson
14,997 Points

Ahh Anthony, that was my first error! Then CSS all works except for just the btn- but it may explain the grid system fail. <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Nunito' rel='Stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> </head>

I've managed to figure out some other bits that were broken myself (missing divs) but still can't figure out the btn and grids

Anthony Hind
Anthony Hind
5,715 Points
Anthony Hind
Anthony Hind
5,715 Points

Your btn css has a couple of errors also 

            .btn {
    color: #FAF3BC;
    background-color: #4FB69F url('img/texture.png') no-repeat right top
    padding: 15px 30px;
    margin: 40px 0px;
    border-radius: 25px
    text-transform: uppercase;4CCSA7
}
            ``` 


you have missed the semi colons of the end of line 2, 5 & 6

```css
            .btn {
    color: #FAF3BC;(1)
    background-color: #4FB69F url('img/texture.png') no-repeat right top;(2)
    padding: 15px 30px;(3)
    margin: 40px 0px;(4)
    border-radius: 25px;(5)
    text-transform: uppercase;(6)
}
            ``` 



hope that helps
Leah Thompson
Leah Thompson
14,997 Points
Leah Thompson
Leah Thompson
14,997 Points

ooh just seen your reply James. Added all alterations. Pre- James' alterations everything but the button worked...but my images were the wrong way around. Added the alterations just given, I now have the text alterations, but still no button, and my pictures are back to being on top of one another! lol. I know its going to be something so minor!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Put your current code on codepen.io so we can see what your current issues are.