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 Arvin T
Arvin T
1,389 Points

CSS: Help with styling content [Resolved]

Hey guys, I'm currently doing the "Finishing the CSS" under Styling Content. I'm almost done except for one problem.

Here's a screenshot

I'm trying to align the 'Fresh Out The Oven' with the 'Cupcake of the Week' but I can't seem to do it. The bottom two headings seem to be alright though.

I tried to add a margin under cupcake image but it pushes down the 'Cupcake of the Week' part too. Also tried to add a top margin for it but it still won't align.

Any kind of help would be much appreciated. Thank you.

7 Answers

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

@Arvin - There was a typo on this line:

<div id="new-cupcakes" class="grid 5 omega">

Change grid 5 to grid_5, then you will be applying the CSS class from the grid.css file.

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

@Arvin - There are 2 possibilites ...

  1. The browser on your computer renders the website that way
  2. There's something you need to fix in your code

To check for first one go to smellslikebakin.com in Chrome & Firefox and compare how they look to your website.

If that's not the issue create a "working" example using codepen and post it here.

Steve Brennan
Steve Brennan
3,070 Points
Steve Brennan
Steve Brennan
3,070 Points

Just a heads up, Jame's code pen link goes to the wrong place. It's http://codepen.io/ .

Hope this helps,

Steve

Arvin T
Arvin T
1,389 Points
Arvin T
Arvin T
1,389 Points

Thanks, here's the codepen link. I just uploaded the images on imgur and changed the source.

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

@Steve - Thanks for the heads up, that was a typo, it's fixed now.

Arvin T
Arvin T
1,389 Points
Arvin T
Arvin T
1,389 Points

@James

How could I have missed something so simple! It works fine now.

Thank you very much!!

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

@Arvin -

You're quite welcome.

Sometimes it's the simple typos that are the hardest to track down. I've spent a few hours, tracking down a rogue semicolon before.