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

Posted by Jason Causey
Jason Causey
2,686 Points

Why isnt the grid.css file working?

I am stuck on the grid part of the CSS lesson where we add in the grid.css to the cupcake webpage. My webpage so far has shown the HTML and the normalize.css but the grid.css isn't showing.

J A
J A
6,092 Points

Can you post some of your code?

Jason Causey
Jason Causey
2,686 Points

I am working along with everything I see within the lessons in order to build this basic website but just don't see the change after the refresh when I add the grid.css file. Maybe I have a file in the wrong place?

Here is the code for the grid.css file.

/* Width: 1000px

Columns : 12

Column width: 65px Gutter : 20px

*/ .grid_1 { width: 65px; } .grid_2 { width: 150px; } .grid_3 { width: 235px; } .grid_4 { width: 320px; } .grid_5 { width: 405px; } .grid_6 { width: 490px; } .grid_7 { width: 575px; } .grid_8 { width: 660px; } .grid_9 { width: 745px; } .grid_10 { width: 830px; } .grid_11 { width: 915px; } .grid_12 { width: 1000px; }

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, margin: 0 20px 10px 0; float: left; display: block; }

.alpha{margin-left: 0px;} .omega{margin-right: 0px;}

.container{ width: 1000px; margin: auto; }

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line

Is the code not completely finished? That was all I could see in the video..

J A
J A
6,092 Points

Did you add the classes from the grid.css to your html? Can you post your HTML?

Jason Causey
Jason Causey
2,686 Points

I think so... Here is the index.html file.

<!DOCTYPE html> <html> <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"> </head> <body> <div class="container"> <img src"img/logo.gif" alt="Smells Like Bakin"> <ul class="nav"> <li><a href="#">About</a></li> <li><a href="#">Cupcakes & Prices</a></li> <li><a href="#">Locations</a></li> <li class="last"><a href="#">Contact Us</a></li> </ul> <div id="intro"> <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1> <p><a href="#" class="btn">Browse Our Cupcakes</a></p> </div>

    <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">

    <div id="featured-cupcake">
        <h2>Cupcake of the Week</h2>
        <p>This week's featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. Its stange combo of flavors will kick your taste buds into fiesta mode!</p>
        <img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
    </div>

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

    <h2>Inside the Kitchen</h2>
    <p>Smells Like Bakin' started out in the garage of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business  and cupcake truck.</p>
    <p><a href="#" class="btn-small">Read More</p>

    <h2>Get Bakin' with Us</h2>

    <div id="contact">
        <p>Call us: <span>1-555-CUP-CAKE</span><br>
            Email us: <a href"#">bakeon@smellslikebakin.com</a></p>
    </div>

    <p>We announce all of our new flavors first through facebook &amp; Twitter, and even taste requests!</p>
    <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>
    <a href="http://twitter.com/#!/smellslikebakin"><img src="img/twitter.gif" alt="Twitter"></a>

    <div id="copyright">
        <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
    </div>
</div>

</body> </html>

Jason Causey
Jason Causey
2,686 Points

Whoa its not showing properly... I think maybe I missed some code? I am gonna check it in a few minutes.

3 Answers

J A
J A
6,092 Points
J A
J A
6,092 Points

You have to add the classes from grid.css to your HTML (I believe it shows you how to do this in the videos for the project).

An Example would be,

<div class="grid_5" id="featured-cupcake">
    <h2>Cupcake of the Week</h2>
    <p>This week's featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. Its stange combo of flavors will kick your taste buds into fiesta mode!</p>
    <img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
</div>

Adding the class is how you apply the grid styling to the HTML elements. Above is just an example, I can't recall if that div element is supposed to have a grid.

Also, unless that didnt post properly, you are missing <html> <head> and <body> tags

Jason Causey
Jason Causey
2,686 Points

Ah I see . I didnt add the grid classes. Thanks man

Jason Causey
Jason Causey
2,686 Points
Jason Causey
Jason Causey
2,686 Points

Now I went back and added the grid classes, but I need the location of the img files for the page and also I think something is missing still. The page is not centered correctly for one.

index.html

<!DOCTYPE HTML> <html> <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"> </head> <body> <div id="container clearfix"> <div class="grid_4"> <img src"img/logo.gif" alt="Smells Like Bakin"> </div> <div class="grid_8 omega"> <ul class="nav"> <li><a href="#">About</a></li> <li><a href="#">Cupcakes & Prices</a></li> <li><a href="#">Locations</a></li> <li class="last"><a href="#">Contact Us</a></li> </ul> </div> <div id="intro" class="grid_9"> <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1> <p><a href="#" class="btn">Browse Our Cupcakes</a></p> </div> <div class="grid_3" omega> <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush"> </div>

    <div id="featured-cupcake" class="grid_7">
        <h2>Cupcake of the Week</h2>
        <p>This week's featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. Its stange combo of flavors will kick your taste buds into fiesta mode!</p>
        <img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
    </div>

    <div id="new-cupcakes" class="grid_5 omega">
        <h2>Fresh Out the Oven</h2>
        <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeno So Spicy</a>.</p>
        <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
        <img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
    </div>
    <div class="grid_7">
        <h2>Inside the Kitchen</h2>
        <p>Smells Like Bakin' started out in the garage of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business  and cupcake truck.</p>
        <p><a href="#" class="btn-small">Read More</p>
    </div>
    <div class="grid_5 omega">
        <h2>Get Bakin' with Us</h2>

        <div id="contact">
            <p>Call us: <span>1-555-CUP-CAKE</span><br>
                Email us: <a href"#">bakeon@smellslikebakin.com</a></p>
        </div>

        <p>We announce all of our new flavors first through facebook &amp; Twitter, and even taste requests!</p>
        <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>
        <a href="http://twitter.com/#!/smellslikebakin"><img src="img/twitter.gif" alt="Twitter"></a>
    </div>

    <div id="copyright" class="grid_12">
        <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
    </div>
</div>

</body> </html>

grid.css

/* Width: 1000px

Columns : 12

Column width: 65px Gutter : 20px

*/ .grid_1 { width: 65px; } .grid_2 { width: 150px; } .grid_3 { width: 235px; } .grid_4 { width: 320px; } .grid_5 { width: 405px; } .grid_6 { width: 490px; } .grid_7 { width: 575px; } .grid_8 { width: 660px; } .grid_9 { width: 745px; } .grid_10 { width: 830px; } .grid_11 { width: 915px; } .grid_12 { width: 1000px; }

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, margin: 0 20px 10px 0; float: left; display: block; }

.alpha{margin-left: 0px;} .omega{margin-right: 0px;}

.container{ width: 1000px; margin: auto; }

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line

Jason Causey
Jason Causey
2,686 Points

i dont know why the header section isnt showing properly. I may have the code written wrong.

J A
J A
6,092 Points

For the images you will either need to download the project files or link directly to the online ones here,

http://www.smellslikebakin.com/

Matt Fletcher
Matt Fletcher
179 Points
Matt Fletcher
Matt Fletcher
179 Points

I'm also having the same problem, did you figure it out?