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

Posted January 23, 2014 6:40pm by

Working with grids failure

Before this section everything is great! but after coding the links and container, my web doesnt respond with the margins....it stays the same.

help!!

January 23, 2014 7:16pm

'''html/css

<div>

  <h2>Cupcake of the week</h2>
  <p>This week's featured cupcake is the <a href="#">Avocado Chocolate Cupcake</a>. Its strange comboof 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="#">Jalapeño So Spicy</a>. </p>
      <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
      <img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeño 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. Alison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to todayand they have a succesful store front, caterin business and cupcake truck. </p>
  <p><a href="#" class="btn-small">Read More</a></p>


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

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

  <p>We anounce all of our new flavors first through Facebook &amp; Twitter, and even take 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>'''

January 23, 2014 7:23pm

<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 &amp; Prices</a></li>
      <li><a href="#">Locations</a></li>
      <li class-"last"><a href="#">Contact Us</a></li>
    </ul>
    <div id="intro">
      <h1>Opposites do attract, especially in our kitchen! We combine unexpected flavors that melt togetherto create irronically 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>

      <h2>Cupcake of the week</h2>
      <p>This week's featured cupcake is the <a href="#">Avocado Chocolate Cupcake</a>. Its strange comboof 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="#">Jalapeño So Spicy</a>. </p>
          <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
          <img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeño 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. Alison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to todayand they have a succesful store front, caterin business and cupcake truck. </p>
      <p><a href="#" class="btn-small">Read More</a></p>


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

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

      <p>We anounce all of our new flavors first through Facebook &amp; Twitter, and even take 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>```

January 25, 2014 8:20pm

EXACTLY, my same issue. my browser is being stuck up and will not conform :(

10 Answers

January 23, 2014 10:25pm

Still doesnt work, but the instructional video, doesnt close it with a />

I suspect it has something to do with file locations....

January 23, 2014 8:24pm

ok. my bad. After seeing most of the basic stuff for html, we started with CSS. In CSS we started working with grids... We started with the <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">`

then we used:

<div class="container">

Grid.css :

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

this made the web centered with margins... my web showed no change whatsoever.

January 25, 2014 4:30pm

This is the problem i'm now facing, grid is not doing anything

January 25, 2014 4:54pm

ok. the way I fixed it, was putting all the files in the same folder. *Note. if you have your web browser compacted, try expanding it.

January 25, 2014 4:56pm

Worked perfect. Love you

January 25, 2014 5:04pm

LOL!!

January 25, 2014 8:23pm

when you say you put all the files in the same folder would this mean all files in css? index.html file, normalize.css, grid.css, img file folder?

January 25, 2014 8:28pm

Make sure you have you img forlder, then in that img there is a css folder, in that css forlder you should have your grid, and normalize.css too. in the sae folder you will add next another img in the css one. So the first img will have all files grouped into folders of not. hope you understand what I mean

January 26, 2014 8:35pm

the way Adama helped me he broke it down for me (a really frustrated ADHD learner) here is the structure of the files. I literally had to map this out to understand :) from left to right. folder are in CAPS

TREEHOUSE IMG (1st file) index.html (inside 1st file) IMG (inside 1st file) jpg and gif files (second img file) CSS (inside 1st file) IMG (inside CSS folder) grid.css (inside css folder) normalize.css (inside css folder) style.css (inside css folder)

January 26, 2014 10:02pm

I re-downloaded all the stuff from even later on, and it looks like everything works now that I didn't, y'know, do any of the work. Maybe I'm not cut out for coding? Hm.

Anyway THANK YOU SO MUCH! Your map legit helped! I appreciate it. :)

January 23, 2014 7:41pm

Hi Andres,

I don't understand what exactly is your problem. What are you trying to do? You say "my web doesnt respond with the margins....it stays the same.", but is it not it is supposed to do? What did you expect?

January 23, 2014 9:01pm

Did you try to close your link markup?

 <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen" />

January 25, 2014 9:17pm

yep i am a totally confused adhd learner lol

ok i got this much: img folder ? css folder inside img folder grid.css in css folder normalize in css folder another img folder in css folder right so far? in this img folder is the images for the website here?

where is the index.html file going to go?

January 25, 2014 9:28pm

index.htlm goes in img folder the first one, don't forget to download on the right corner new stuff, the zip folder gets bigger

January 25, 2014 9:31pm

got it thank you so much!!!!!

January 25, 2014 9:44pm

Welcome Lady

January 26, 2014 5:05pm

Hold up I'm having the same problem, and I feel like y'all are seeing something I'm not. I have no doubt my problem is also file locations. But you're telling me to put it all in the img folder -- I don't have an img folder, my files are all standalone. As in, on the left side of my Sublime Text it reads exactly like this:

index.html grid.css normalize.css

How do I get these in a folder via Sublime?? Seriously so frustrated over here.

January 26, 2014 5:37pm

Never mind, it was a case of click and drag. Now I have a series of folders that just aren't working. My frustration level is at a 7 I'd say. This is becoming ridiculous.

January 26, 2014 10:40pm

Brad, you cannot think like that. I am adhd and although I started years ago learning some coding and I get confused her and there, I refuse to believe I could not be good at this. What I would not be good at is working outside the home :( I last a good couple of months before I get bored and my mind wanders and I mentally all over the place, hence - FIRED!!!!

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Andres Ancira

Andres Ancira

Working with grids failure

Andres Ancira

Andres Ancira

Andres Ancira

Andres Ancira

Miranda Perry

Miranda Perry

10 Answers

Andres Ancira

Andres Ancira

Andres Ancira

Andres Ancira

Adama Sy

Adama Sy

Andres Ancira

Andres Ancira

Adama Sy

Adama Sy

Andres Ancira

Andres Ancira

Miranda Perry

Miranda Perry

Adama Sy

Adama Sy

Miranda Perry

Miranda Perry

Brad O'Donnell

Brad O'Donnell

Giovanni CELESTE

Giovanni CELESTE

Giovanni CELESTE

Giovanni CELESTE

Miranda Perry

Miranda Perry

Adama Sy

Adama Sy

Miranda Perry

Miranda Perry

Adama Sy

Adama Sy

Brad O'Donnell

Brad O'Donnell

Brad O'Donnell

Brad O'Donnell

Miranda Perry

Miranda Perry