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

HTML Build a Simple Website Creating a Website Structure Working with Grids

Posted by Bev M.
Bev M.
667 Points

changing grid classes

hello!

can someone please explain to me why that if you change the grid class for "intro" and the "you bake me blush" from grid 9 to grid 3 omega to grid 7 and grid 5 omega, it changes the layout of everything? i thought i only had to contain the classes in the 12 columns. i wanted to make the "intro" grid smaller, but it seems to mess up the layout of everything. please help! thanks!

 <div id="intro" class="grid_7">
      <h1>Opposite 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_5 omega">
      <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">
    </div>

3 Answers

Edward Torrers
Edward Torrers
2,745 Points

By switching from "grid_9" to "grid_7" the word wrap feature has messed up your height, pushing it to the right of "h1" where there is more room. If you want to go any lower its best to switch to "grid_8" and "grid_4" and remove #intro margin (with cmd /) than mess with all the settings. Hope that helped :)

Bev M.
Bev M.
667 Points

ahhh you're the best! thanks!!! it was driving me crazy! thanks for the explanation/help :)

paul white
paul white
13,958 Points
paul white
paul white
13,958 Points

Do you need to add an alpha class to the intro div?

 <div id="intro" class="grid_7 alpha">
      <h1>Opposite 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_5 omega">
      <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">
  </div>
Bev M.
Bev M.
667 Points

hmm it doesn't work for me, i dont know why! i'm so confused haha

Edward Torrers
Edward Torrers
2,745 Points
Edward Torrers
Edward Torrers
2,745 Points

Np Bev, glad I could be of help. Keep coding!