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

Thomas Carroll
Thomas Carroll
2,400 Points
Posted by Thomas Carroll
Thomas Carroll
2,400 Points

Percentages (Smells Like Bakin)

I've been working on the Fluid Foundation Course in the "Build a Responsive Website" section. I have been following along while updating my own version to correspond with the lessons because I'm a much better hands on learner. I feel like somewhere around the "Creating Flexible Margins" lesson I misunderstood something.

Percentages are fairly new to me. I seem to do fine with the challenges within the lesson but my version of Smells Like Bakin is off. The navigation always wraps when I put percentages on it and there's a very small amount of space that gets added between the intro section and the cupcakes images section.

Perhaps I'm not doing the math correctly? If that's the problem could someone give me an explanation of what I'm doing wrong or point me to some help?

Codepen: http://codepen.io/anon/pen/eCAcl (missing the grid.css so it looks real ugly there, but my HTML and CSS are up)

edit: Updated codepen http://codepen.io/anon/pen/smbua with now with images & grid.css

Smells Like Bakin Problems

Thanks! T.C.

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

Percentages are fairly new to me.

Percentages are covered in the CSS Foundations code challenge, which you appeared to have skipped over.

I'd suggest you follow along with the learn HTML & CSS learning adventure.

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

I fixed the paths for your image & CSS files in your codepen, http://codepen.io/anon/pen/smbua.

I also updated your original post with this new codepen.

Thomas Carroll
Thomas Carroll
2,400 Points
Thomas Carroll
Thomas Carroll
2,400 Points

Strange. I'm not sure how I managed to end up skipping a whole section. I guess the adventure I was on skipped it. I will go back and work on that section. If I end up needing more help, I shall return here.

Thanks!

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

I'm having the identical problem with the nav bar. I can see in my browser that the box model is exactly the same, however when I change to percentages, it wraps???

2 Answers

Thomas MacFarlane
Thomas MacFarlane
2,430 Points
Thomas MacFarlane
Thomas MacFarlane
2,430 Points

Hi there, I have solved this, see my forum post for the details: https://teamtreehouse.com/forum/huh-responsive-web-design-smells-like-bakin-margins-and-paddings

Good coding!

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

Hi Thomas:

When I go to your Codepen, there are no images, so it's going to look different for you than it is for others. The following might be a start:

  ul.nav {
margin: 0 0 0 0;
list-style-type: none;
float: right;
    clear: both;
   }
Thomas MacFarlane
Thomas MacFarlane
2,430 Points

I've got that and I'm still getting the same problems, even with an identical box model the nav bar wraps when moved to percentages